Benchmark: drawing pixels: putImageData vs fillRect

HTML Preparation code:

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

Script Preparation code:

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

Tests:

putImageData
for (var y = 0; y < 180; y++) { for (var x = 0; x < 320; x++) { var i = y * 180 * 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 < 180; y++) { for (var x = 0; x < 320; 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); } }

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

putImageData

411/s

fillRect

13/s

Fastest: putImageData (32.4x faster)

View exact numbers

✓ putImageData: 411 ops/sec
• fillRect: 13 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
putImageData
fillRect

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Windows

View result in a separate tab

putImageData

361/s

fillRect

1/s

View exact numbers

Test name	Executions per second
✓ putImageData	361 Ops/sec
fillRect	1 Ops/sec

drawing pixels: putImageData vs fillRect (version: 1)

Comparing performance of: `putImageData vs fillRect`

Created: one year ago by: Guest

Go to the latest result

putImageData

fillRect

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

drawing pixels: putImageData vs fillRect (version: 1)

Comparing performance of: putImageData vs fillRect

Created: one year ago by: Guest

Go to the latest result

putImageData

fillRect

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `putImageData vs fillRect`