Run results for: Setting a single pixel on an HTML5 canvas element

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser: Chrome 126

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

fillRect with a constant color string

2K/s

fillRect using a concatenated color string

895/s

fillRect using a joined color string

867/s

fillRect with a template literal color string

851/s

Using drawImage to copy a pixel from a palette canvas

387/s

putImageData() using a 1px by 1px ImageData instance

30/s

View exact numbers

Test name	Executions per second
✓ fillRect with a constant color string	1,875 Ops/sec
fillRect using a concatenated color string	895 Ops/sec
fillRect using a joined color string	867 Ops/sec
fillRect with a template literal color string	851 Ops/sec
Using drawImage to copy a pixel from a palette canvas	387 Ops/sec
putImageData() using a 1px by 1px ImageData instance	30 Ops/sec

HTML Preparation code:

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

Script Preparation code:

// Create the canvas that the pixels will be drawn to:
$canvas = document.getElementById('canvas');
$context = $canvas.getContext('2d');
$context.clearRect(0, 0, 800, 300);

// Use that canvas to generate a 1px by 1px ImageData instance:
$onePixel = $context.createImageData(1, 1);
$onePixelData = $onePixel.data;

// Create 10,000 test pixels:
$pixels = [];
for (let i=0; i<10000; ++i) {
  const pixel = {
    x: Math.random() * 800 << 0,
    y: Math.random() * 300 << 0,
    r: Math.random() * 255 << 0,
    g: Math.random() * 255 << 0,
    b: Math.random() * 255 << 0,
    a: (Math.random() * 128 << 0) + 128,
  };
  pixel.aNormalized = pixel.a / 255;
  pixel.rgbaArray = [pixel.r, pixel.g, pixel.b, pixel.aNormalized];
  $pixels.push(pixel);
}

// For the drawImage() test, create a canvas that has all 10,000 pixels rendered to it:
$paletteCanvas = document.createElement('canvas');
$paletteCanvas.width = 10000;
$paletteCanvas.height = 1;
const paletteContext = $paletteCanvas.getContext('2d');
const imageData = paletteContext.getImageData(0, 0, 10000, 1);
$pixels.forEach((pixel, index) => imageData.data.set(pixel.rgbaArray, index));
paletteContext.putImageData(imageData, 0, 0);

$iterations = 500;

Tests:

fillRect using a concatenated color string
for (let i=0; i<$iterations; ++i) { const px = $pixels[i % 10000]; $context.fillStyle = 'rgba(' + px.r + ',' + px.g + ',' + px.b + ',' + px.aNormalized + ')'; $context.fillRect(px.x, px.y, 1, 1); }
fillRect using a joined color string
for (let i=0; i<$iterations; ++i) { const px = $pixels[i % 10000]; $context.fillStyle = 'rgba(' + px.rgbaArray.join() + ')'; $context.fillRect(px.x, px.y, 1, 1); }
fillRect with a template literal color string
for (let i=0; i<$iterations; ++i) { const px = $pixels[i % 10000]; $context.fillStyle = `rgba(${px.r},${px.g},${px.b},${px.aNormalized})`; $context.fillRect(px.x, px.y, 1, 1); }
fillRect with a constant color string
for (let i=0; i<$iterations; ++i) { const px = $pixels[i % 10000]; $context.fillStyle = 'rgba(100,150,200,0.9)'; $context.fillRect(px.x, px.y, 1, 1); }
putImageData() using a 1px by 1px ImageData instance
for (let i=0; i<$iterations; ++i) { const px = $pixels[i % 10000]; $onePixelData[0] = px.r; $onePixelData[1] = px.g; $onePixelData[2] = px.b; $onePixelData[3] = px.a; $context.putImageData($onePixel, px.x, px.y); }
Using drawImage to copy a pixel from a palette canvas
for (let i=0; i<$iterations; ++i) { const index = i % 10000; const px = $pixels[index]; $context.drawImage($paletteCanvas, index, 0, 1, 1, px.x, px.y, 1, 1); }