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

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

Historical Performance Data aggregated from 32 community runs

Desktop Results:

Chrome 19 runs

getImageData/putImageData - set - no getImageData

676/s

getImageData/putImageData

319/s

getImageData/putImageData - set px.rgba

276/s

getImageData/putImageData - set [px.r, px.g, px.b, px.a]

243/s

fillRect/concat

117/s

fillRect/join

109/s

fillRect/template literal

66/s

1×1 Image Data

6/s

Fastest: getImageData/putImageData - set - no getImageData (122.1x faster)

View exact numbers

✓ getImageData/putImageData - set - no getImageData: 676 ops/sec
• getImageData/putImageData: 319 ops/sec
• getImageData/putImageData - set px.rgba: 276 ops/sec
• getImageData/putImageData - set [px.r, px.g, px.b, px.a]: 243 ops/sec
• fillRect/concat: 117 ops/sec
• fillRect/join: 109 ops/sec
• fillRect/template literal: 66 ops/sec
• 1×1 Image Data: 6 ops/sec

Firefox 13 runs

getImageData/putImageData - set - no getImageData

543/s

getImageData/putImageData

335/s

getImageData/putImageData - set px.rgba

312/s

getImageData/putImageData - set [px.r, px.g, px.b, px.a]

312/s

fillRect/concat

176/s

fillRect/join

168/s

fillRect/template literal

117/s

1×1 Image Data

29/s

Fastest: getImageData/putImageData - set - no getImageData (19.0x faster)

View exact numbers

✓ getImageData/putImageData - set - no getImageData: 543 ops/sec
• getImageData/putImageData: 335 ops/sec
• getImageData/putImageData - set px.rgba: 312 ops/sec
• getImageData/putImageData - set [px.r, px.g, px.b, px.a]: 312 ops/sec
• fillRect/concat: 176 ops/sec
• fillRect/join: 168 ops/sec
• fillRect/template literal: 117 ops/sec
• 1×1 Image Data: 29 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 2 months 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

getImageData/putImageData - set - no getImageData

595/s

getImageData/putImageData

319/s

getImageData/putImageData - set [px.r, px.g, px.b, px.a]

277/s

getImageData/putImageData - set px.rgba

276/s

fillRect/concat

119/s

fillRect/join

109/s

fillRect/template literal

66/s

1×1 Image Data

1/s

View exact numbers

Test name	Executions per second
✓ getImageData/putImageData - set - no getImageData	595 Ops/sec
getImageData/putImageData	319 Ops/sec
getImageData/putImageData - set [px.r, px.g, px.b, px.a]	277 Ops/sec
getImageData/putImageData - set px.rgba	276 Ops/sec
fillRect/concat	119 Ops/sec
fillRect/join	109 Ops/sec
fillRect/template literal	66 Ops/sec
1×1 Image Data	1 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.

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

Go to the latest 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

Historical Performance Data aggregated from 32 community runs

Desktop Results:

Chrome 19 runs

Firefox 13 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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`