Benchmark: Setting Canvas Pixel (w/string interpolation)

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/interpolate
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/interpolate

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmarking framework called MeasureThat.net. The benchmark measures the performance of different approaches for drawing a single pixel on a canvas element using the 2D drawing context.

**Options Compared**

There are four test cases compared:

1. `fillRect/concat`: uses string concatenation to build the color string.
2. `fillRect/join`: uses the `join()` method to concatenate the color components into a string.
3. `fillRect/interpolate`: uses template literals with interpolation (e.g., `${px.r}`) to build the color string.
4. `1×1 Image Data`: uses a separate array (`d`) to store the pixel data and then passes it to `putImageData()`.

**Pros and Cons of Each Approach**

1. **`fillRect/concat`**: This approach is simple and concise, but can lead to slower performance due to the overhead of concatenating strings. The resulting string may also be larger than necessary.
2. **`fillRect/join()`**: This approach is more efficient than `concat` because it avoids creating an intermediate string object. However, it may not be as readable or maintainable for complex color values.
3. **`fillRect/interpolate`**: This approach uses template literals, which can make the code more readable and efficient. However, it may require additional compilation steps due to the use of interpolative syntax.
4. **`1×1 Image Data`**: This approach is likely the slowest because it involves creating a separate array to store the pixel data and then passing it to `putImageData()`, which can be an expensive operation.

**Library: Canvas**

The `Canvas` API is used throughout these benchmarks to draw pixels on the canvas element. The `2D` context provides methods for drawing shapes, including `fillRect()`.

**Special JavaScript Feature or Syntax**

Template literals (e.g., `${px.r}`) are used in the `fillRect/interpolate` approach. This feature allows for more readable and efficient string interpolation.

**Alternative Approaches**

Other approaches could be explored to improve performance:

1. **Using a single array**: Instead of creating separate arrays or strings, using a single array to store all pixel data and then processing it in a loop.
2. **Using SIMD instructions**: If the target hardware supports SIMD (Single Instruction, Multiple Data) instructions, the benchmark could use these to accelerate color calculations.
3. **Caching or memoization**: Implementing caching or memoization mechanisms can reduce the number of iterations required for each test case.

Keep in mind that these alternative approaches may require significant changes to the benchmark code and may not always lead to better performance.

Latest run results:

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

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

Browser/OS: Chrome 112 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
fillRect/concat	868.7 Ops/sec
fillRect/join	846.0 Ops/sec
1×1 Image Data	51.9 Ops/sec
fillRect/interpolate	879.7 Ops/sec

Related benchmarks:

Setting Canvas Pixel (w/string interpolation) (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

fillRect/concat

fillRect/join

1×1 Image Data

fillRect/interpolate

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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