Run results for: Setting multiple canvas pixels

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser: Chrome 119

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

PutImageData

8K/s

FillRect

1K/s

View exact numbers

Test name	Executions per second
✓ PutImageData	7,733 Ops/sec
FillRect	1,099 Ops/sec

HTML Preparation code:

<canvas id="c" width="800" height="1"></canvas>

Script Preparation code:

$N = 800;

$c = document.getElementById('c');
$ctx = c.getContext('2d');

$ctx.clearRect(0, 0, $N, 1);
$pxls = [];
for (let i = 0; i < $N; ++i) {
    $pxls.push({
        r: Math.random() * 255 << 0,
        g: Math.random() * 255 << 0,
        b: Math.random() * 255 << 0
    });
}

Tests:

FillRect
for (let i = 0; i < $N; i++) { let px = $pxls[i]; $ctx.fillStyle = 'rgb(' + px.r + ',' + px.g + ',' + px.b + ')'; $ctx.fillRect(i, 0, 1, 1); }
PutImageData
const imageData = $ctx.createImageData($N, 1); const data = imageData.data; for (let i = 0; i < $N; i++) { let px = $pxls[i]; data[i * 4 + 0] = px.r; data[i * 4 + 1] = px.g; data[i * 4 + 2] = px.b; data[i * 4 + 3] = 255; } $ctx.putImageData(imageData, 0, 0);