Run results for: clearing canvas v2

Run details:

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: Chrome 133

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
putImageData fill	20293.2 Ops/sec
fillRect	5136025.5 Ops/sec
clearRect	4847142.5 Ops/sec
putImageData loop	4397.1 Ops/sec

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 fill
pixels.fill(0); aa.putImageData(imgdata, 0, 0);
fillRect
bb.fillStyle = `#0000`; bb.fillRect(0, 0, 320, 180);
clearRect
bb.clearRect(0, 0, 320, 180);
putImageData loop
for (var i = 0; i < 180 * 320 * 4; i++) pixels[i]=0; dd.putImageData(imgdata, 0, 0);

Run results for: clearing canvas v2

putImageData fill

fillRect

clearRect

putImageData loop