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: 3 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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Yandex Browser 24 on Windows

View result in a separate tab

Test name	Executions per second
fillRect/concat	54.7 Ops/sec
fillRect/join	77.0 Ops/sec
1×1 Image Data	10.7 Ops/sec
fillRect/template literal	52.4 Ops/sec
getImageData/putImageData	236.6 Ops/sec
getImageData/putImageData - set px.rgba	214.0 Ops/sec
getImageData/putImageData - set [px.r, px.g, px.b, px.a]	215.6 Ops/sec
getImageData/putImageData - set - no getImageData	353.2 Ops/sec

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: 3 years ago by: Registered User

Jump 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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A