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: one year ago

Test name	Executions per second
FillRect	1105.9 Ops/sec
PutImageData	2918.4 Ops/sec

HTML Preparation code:

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

AخA
 
<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
    });
}

​x
 
$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);
}

 
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);

 
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);