Run results for: Setting multiple canvas pixels

Run details:

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

Browser: Firefox 141

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

PutImageData

103K/s

FillRect

850/s

View exact numbers

Test name	Executions per second
✓ PutImageData	102,967 Ops/sec
FillRect	850 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 * $N * 4 + 0] = px.r; data[i * $N * 4 + 1] = px.g; data[i * $N * 4 + 2] = px.b; data[i * $N * 4 + 3] = 255; } $ctx.putImageData(imageData, 0, 0);