Benchmark: Setting Canvas Pixel with lots of iterations - looking more at get/put

Setting Canvas Pixel with lots of iterations - looking more at get/put (version: 1)

Comparing performance of: fillRect/concat vs fillRect/join vs 1×1 Image Data vs fillRect/template literal vs getImageData/putImageData vs getImageData/putImageData - set px.rgba vs getImageData/putImageData - set [px.r, px.g, px.b, px.a] vs getImageData/putImageData - set - no getImageData

Created: 6 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

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

Script Preparation code:

$c = document.getElementById('c');
$ctx = $c.getContext('2d');
$ctx.clearRect(0, 0, 800, 300);
$px = $ctx.createImageData(1, 1);
$id = $ctx.getImageData(0, 0, 800, 600);
$pxls = [];
for (var i = 0; i < 1000000; ++i) {
    const pxl = {
        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
    };
    pxl.rgba = [pxl.r, pxl.g, pxl.b, pxl.a];
    $pxls.push(pxl);
};
$i = 0;
$iterations = 5000;
/*
At 1500+ $iterations the putimagedata/getimagedata starts to win and at 5000 it slaughters.  Below that the other methods win
So it depends on how many you plan on drawing each frame
*/

Tests:

fillRect/concat
for (var i=$iterations;i--;){ var px = $pxls[$i++ % 10000]; $ctx.fillStyle = 'rgba(' + px.r + ',' + px.g + ',' + px.b + ',' + (px.a / 255) + ')'; $ctx.fillRect(px.x, px.y, 1, 1); }
fillRect/join
for (var i=$iterations;i--;){ var px = $pxls[$i++ % 10000]; $ctx.fillStyle = 'rgba(' + [px.r,px.g,px.b,px.a/255].join() + ')'; $ctx.fillRect(px.x, px.y, 1, 1); }
1×1 Image Data
for (var i=$iterations;i--;){ var px=$pxls[$i++ % 10000], d=$px.data; d[0] = px.r; d[1] = px.g; d[2] = px.b; d[3] = px.a; $ctx.putImageData($px, px.x, px.y); }
fillRect/template literal
for (var i=$iterations;i--;){ var px = $pxls[$i++ % 10000]; $ctx.fillStyle = `rgba(${px.r},${px.g},${px.b},${px.a/255}})`; $ctx.fillRect(px.x, px.y, 1, 1); }
getImageData/putImageData
var canvasWidth = $c.width; var canvasHeight = $c.height; var id = $ctx.getImageData(0, 0, canvasWidth, canvasHeight); var pixels = id.data; for (var i=$iterations;i--;){ var px = $pxls[$i++ % 10000]; var off = (px.y * canvasWidth + px.x) * 4; pixels[off] = px.r; pixels[off + 1] = px.g; pixels[off + 2] = px.b; pixels[off + 3] = px.a; } $ctx.putImageData(id, 0, 0);
getImageData/putImageData - set px.rgba
var canvasWidth = $c.width; var canvasHeight = $c.height; var id = $ctx.getImageData(0, 0, canvasWidth, canvasHeight); var pixels = id.data; for (var i=$iterations;i--;){ var px = $pxls[$i++ % 10000]; var off = (px.y * canvasWidth + px.x) * 4; pixels.set(px.rgba,off); } $ctx.putImageData(id, 0, 0);
getImageData/putImageData - set [px.r, px.g, px.b, px.a]
var canvasWidth = $c.width; var canvasHeight = $c.height; var id = $ctx.getImageData(0, 0, canvasWidth, canvasHeight); var pixels = id.data; for (var i=$iterations;i--;){ var px = $pxls[$i++ % 10000]; var off = (px.y * canvasWidth + px.x) * 4; pixels.set([px.r,px.g,px.b,px.a],off); } $ctx.putImageData(id, 0, 0);
getImageData/putImageData - set - no getImageData
var canvasWidth = $c.width; var canvasHeight = $c.height; //var id = $ctx.getImageData(0, 0, canvasWidth, canvasHeight); var pixels = $id.data; pixels.fill(); for (var i=$iterations;i--;){ var px = $pxls[$i++ % 10000]; var off = (px.y * canvasWidth + px.x) * 4; pixels.set(px.rgba,off); } $ctx.putImageData($id, 0, 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
fillRect/concat
fillRect/join
1×1 Image Data
fillRect/template literal
getImageData/putImageData
getImageData/putImageData - set px.rgba
getImageData/putImageData - set [px.r, px.g, px.b, px.a]
getImageData/putImageData - set - no getImageData

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 18 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Browser/OS: Chrome 142 on Windows

View result in a separate tab

Test name	Executions per second
fillRect/concat	119.1 Ops/sec
fillRect/join	109.1 Ops/sec
1×1 Image Data	1.1 Ops/sec
fillRect/template literal	66.3 Ops/sec
getImageData/putImageData	318.7 Ops/sec
getImageData/putImageData - set px.rgba	275.9 Ops/sec
getImageData/putImageData - set [px.r, px.g, px.b, px.a]	277.3 Ops/sec
getImageData/putImageData - set - no getImageData	595.4 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'd be happy to help you understand the benchmark results!

The benchmark results are for various tests related to image data and drawing on canvas elements in Firefox 132, running on Linux.

Here are some observations and insights from the results:

1. **putImageData - set**: The "putImageData" test is performed with different parameters, such as setting pixel values directly (`px.rgba`) or using arrays of individual color components (`[px.r, px.g, px.b, px.a]`). These variations likely reflect different approaches to optimizing performance.
2. **putImageData - no getImageData**: This test measures the execution speed when `getImageData` is not used before calling `putImageData`. It's possible that this test is designed to isolate the impact of using `putImageData` without first fetching image data from a canvas.
3. **fillRect/concat**: The results for the "fillRect" test suggest significant variations in execution speed across different methods (template literals, joining strings, and concatenation). This might indicate differences in how the browser optimizes or handles these drawing operations.
4. **fillRect/template literal**: The slowest execution time among all tests is achieved using template literals for the `fillRect` method. This could be due to a specific quirk in Firefox's JavaScript engine or a limitation in the language itself.
5. **1×1 Image Data**: The fastest test of all, with an execution speed of 35.42 ms, suggests that even simple image data operations can have a significant impact on performance.

Overall, these results provide insights into the relative efficiency of different approaches to drawing and manipulating canvas elements in Firefox 132.

Related benchmarks: