Benchmark: Setting Canvas Pixel Concat/Join/template vs Image data

HTML Preparation code:

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

Script Preparation code:

$c = document.getElementById('c');
$ctx = $c.getContext('2d');
$ctx.clearRect(0, 0, 800, 300);
$px = $ctx.createImageData(1, 1);
$pxls = [];
for (var i=0; i<10000; ++i) $pxls.push({
   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
});
$i = 0;

Tests:

fillRect/concat
for (var i=500;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=500;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=500;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
for (var i=500;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); }

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

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark is designed to test the speed of different pixel setting methods in Firefox 87 on Windows desktops. The script creates an image data array, populates it with random color values, and then uses this data to draw small rectangles on a canvas using the `fillRect()` method.

**Test Cases**

There are four individual test cases:

1. **fillRect/concat**: This test case concatenates the color values for each pixel into a single string, separated by commas, before passing them to the `fillRect()` method.
2. **fillRect/join**: Similar to the previous test case, but instead of concatenating, it uses the `join()` method to join the color values with commas.
3. **1×1 Image Data**: This test case uses the `putImageData()` method to draw a small image from the created image data array directly onto the canvas, without using the `fillRect()` method.
4. **fillRect/template**: This test case uses template literals to construct the color string for each pixel before passing it to the `fillRect()` method.

**Library Usage**

In this benchmark, the following libraries are used:

* None explicitly mentioned in the code snippet, but we can assume that the built-in JavaScript and HTML5 Canvas API are used.
* The Firefox browser's rendering engine is likely using some internal optimizations or heuristics to speed up the execution of these test cases.

**Special JS Features/Syntax**

None are explicitly used or mentioned in the provided benchmark code snippet. However, it's worth noting that the use of template literals (`template literals` ) in the **fillRect/template** test case is a modern JavaScript feature introduced in ECMAScript 2015 (ES6).

**Pros and Cons of Each Approach**

Here's a brief overview of each approach:

1. **Concatenating color values**: This approach can be slow due to the overhead of string concatenation, especially when dealing with large arrays.
	* Pros: Simple implementation.
	* Cons: Slow for large arrays.
2. **Joining color values**: Similar to the previous test case, but using `join()` method instead of concatenation.
	* Pros: Slightly faster than concatenation due to using an optimized join function.
	* Cons: Still slower than the other approaches.
3. **Using putImageData()**: This approach bypasses the `fillRect()` method and directly uses the image data array to draw on the canvas.
	* Pros: Faster since it avoids the overhead of string manipulation or iteration.
	* Cons: Requires more memory allocation and management, as the browser needs to allocate memory for the temporary image object.
4. **Using template literals**: This approach constructs a color string using a template literal, which can be faster than concatenation or joining due to the optimized compilation process in modern JavaScript engines.
	* Pros: Fastest implementation due to the use of template literals and optimized compilation.
	* Cons: Only works with ECMAScript 2015 (ES6) and later.

**Other Alternatives**

Some alternative approaches that could be tested in this benchmark include:

1. Using a library like Pixi.js or CanvasJS, which provide optimized rendering engines for drawing on canvases.
2. Implementing custom optimization techniques using the browser's internal APIs or WebAssembly.
3. Testing different caching strategies to reduce the number of times the image data array needs to be accessed.

Keep in mind that these alternatives may require additional setup and testing to ensure accurate results.

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:87.0) Gecko/20100101 Firefox/87.0

Browser/OS: Firefox 87 on Windows

View result in a separate tab

Test name	Executions per second
fillRect/concat	1217.2 Ops/sec
fillRect/join	1146.4 Ops/sec
1×1 Image Data	71.3 Ops/sec
fillRect/template	1144.5 Ops/sec

Related benchmarks:

Setting Canvas Pixel Concat/Join/template vs Image data (version: 0)

Testing the speed of various pixel setting methods. Forked to add template string.

Comparing performance of: fillRect/concat vs fillRect/join vs 1×1 Image Data vs fillRect/template

Created: 3 years ago by: Guest

Jump to the latest result

fillRect/concat

fillRect/join

1×1 Image Data

fillRect/template

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):