Benchmark: clearing canvas - MeasureThat.net

HTML Preparation code:

<canvas id='aa' width='320' height='180'></canvas>
<canvas id='bb' width='320' height='180'></canvas>
<canvas id='cc' width='320' height='180'></canvas>
<canvas id='dd' width='320' height='180'></canvas>

Script Preparation code:

var aa = document.getElementById('aa').getContext('2d');
var bb = document.getElementById('bb').getContext('2d');
var cc = document.getElementById('cc').getContext('2d');
var dd = document.getElementById('dd').getContext('2d');

var pixels = new Uint8ClampedArray(320 * 180 * 4);
var imgdata = new ImageData(pixels, 320, 180);

Tests:

putImageData two loops
for (var y = 0; y < 180; y++) { for (var x = 0; x < 320; x++) { var i = y * 180 * 4 + x * 4; pixels[i + 0] = 0; pixels[i + 1] = 0; pixels[i + 2] = 0; pixels[i + 3] = 0; } } aa.putImageData(imgdata, 0, 0);
fillRect
bb.fillStyle = `#0000`; bb.fillRect(0, 0, 320, 180);
clearRect
bb.clearRect(0, 0, 320, 180);
putImageData one loop
for (var i = 0; i < 180 * 320 * 4; i++) pixels[i]=0; dd.putImageData(imgdata, 0, 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
putImageData two loops
fillRect
clearRect
putImageData one loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0

Browser/OS: Chrome 133 on Windows

View result in a separate tab

fillRect

6.1M/s

clearRect

4.8M/s

putImageData two loops

4K/s

putImageData one loop

4K/s

View exact numbers

Test name	Executions per second
✓ fillRect	6,101,990 Ops/sec
clearRect	4,798,263 Ops/sec
putImageData two loops	4,457 Ops/sec
putImageData one loop	4,402 Ops/sec

clearing canvas (version: 1)

Comparing performance of: `putImageData two loops vs fillRect vs clearRect vs putImageData one loop`

Created: one year ago by: Guest

Go to the latest result

putImageData two loops

fillRect

clearRect

putImageData one loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

clearing canvas (version: 1)

Comparing performance of: putImageData two loops vs fillRect vs clearRect vs putImageData one loop

Created: one year ago by: Guest

Go to the latest result

putImageData two loops

fillRect

clearRect

putImageData one loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `putImageData two loops vs fillRect vs clearRect vs putImageData one loop`