Run results for: Canvas fill test

Run details:

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

Browser: Chrome 90

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
putImageData	226408.6 Ops/sec
fillRect	215940.9 Ops/sec

HTML Preparation code:

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

Script Preparation code:

$canvas = document.getElementById('c');
$ctx = $canvas.getContext('2d');
$cw = $canvas.width;
$ch = $canvas.height;
$id = $ctx.getImageData(0, 0, 1, 1);
$ctx.clearRect(0, 0, $cw, $ch);

function rng() {
  return [
    Math.floor(Math.random() * $cw),
    Math.floor(Math.random() * $ch),
    Math.floor(Math.random() * 256),
    Math.floor(Math.random() * 256),
    Math.floor(Math.random() * 256)
  ];
}

Tests:

putImageData
{ const [x, y, r, g, b] = rng(); $id.data[0] = r; $id.data[1] = g; $id.data[2] = b; $ctx.putImageData($id, x, y); }
fillRect
{ const [x, y, r, g, b] = rng(); $ctx.fillStyle = `rgb(${r},${g},${b})`; $ctx.fillRect(x, y, 1, 1); }

Run results for: Canvas fill test

putImageData

fillRect