Run results for: PutImageData vs DrawImage v3

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

putImageData

5K/s

fillRect

129/s

View exact numbers

Test name	Executions per second
✓ putImageData	4,757 Ops/sec
fillRect	129 Ops/sec

HTML Preparation code:

<canvas id='aa' width='100' height='100'></canvas>
<canvas id='bb' width='100' height='100'></canvas>

Script Preparation code:

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

Tests:

putImageData
for (var y = 0; y < 100; y++) { for (var x = 0; x < 100; x++) { var i = y * 100 * 4 + x * 4; pixels[i + 0] = Math.floor(Math.random() * 256); pixels[i + 1] = Math.floor(Math.random() * 256); pixels[i + 2] = Math.floor(Math.random() * 256); pixels[i + 3] = 255; } } aa.putImageData(imgdata, 0, 0);
fillRect
for (var y = 0; y < 100; y++) { for (var x = 0; x < 100; x++) { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); bb.fillStyle = `rgb(${r},${g},${b})`; bb.fillRect(x, y, 1, 1); } }

Run results for: PutImageData vs DrawImage v3

GetImageData with PutImageData vs just DrawImage

putImageData

fillRect