Benchmark: Setting Canvas Pixel

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, 100);
$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); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
fillRect/concat
fillRect/join
1×1 Image Data

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Definition:**

The benchmark is designed to measure the performance of drawing individual pixels on a canvas using different methods. The script preparation code sets up a canvas element with a 2D drawing context, clears it, creates an image data object, and populates it with random pixel data. The HTML preparation code defines the canvas element.

**Test Cases:**

There are three test cases:

1. **fillRect/concat**: This test case uses the `fillStyle` property to set the color of the fill operation, concatenating individual color components using the `+` operator. It then draws a pixel at each position in the image data object using `fillRect`.
2. **fillRect/join**: Similar to the previous test case, but instead of concatenating the color components, it uses an array and the `join()` method to convert the color components into a string.
3. **1×1 Image Data**: This test case uses the `putImageData()` method to draw the pixel data directly from the image data object. It sets each color component of the image data object as the corresponding channel of the drawing context.

**Library:**

None, but it uses JavaScript's built-in canvas and 2D drawing API.

**Special JS Features/Syntax:**

* The use of `<<` operator for bit shifting (e.g., `Math.random() * 800 << 0`) is a common technique in JavaScript to achieve integer arithmetic.
* The `join()` method on arrays is a standard JavaScript method.

**Options Compared:**

The three test cases compare the performance of different methods for drawing individual pixels:

1. Concatenating color components using `+` (fillRect/concat).
2. Using an array and `join()` to convert color components into a string (fillRect/join).
3. Drawing from image data directly using `putImageData()` (1×1 Image Data).

**Pros and Cons:**

* **Concatenation**:
	+ Pros: Simple, straightforward, and easy to understand.
	+ Cons: May be slower due to the overhead of concatenating strings.
* **Array join()**:
	+ Pros: More efficient than concatenation for larger arrays, as it avoids creating intermediate strings.
	+ Cons: Requires an array and `join()` method, which may add complexity.
* **putImageData()**:
	+ Pros: Directly manipulating image data can be more efficient, especially for large images.
	+ Cons: May require more memory allocation and deallocation, depending on the image size.

**Other Alternatives:**

Other methods to draw individual pixels could include:

* Using a `for` loop with indices instead of array iteration (e.g., `$pxls[$i++]`)
* Using WebAssembly or WebGL for optimized graphics rendering
* Implementing custom pixel drawing using shaders (if supported by the browser)

Keep in mind that the performance differences between these methods may be small and depend on specific use cases, browser versions, and hardware configurations.

Related benchmarks:

Setting Canvas Pixel (version: 0)

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

Created: 8 years ago by: Guest

Jump to the latest result

fillRect/concat

fillRect/join

1×1 Image Data

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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