Benchmark: Setting Canvas Pixel test

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<1000000; ++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++ % 1000000]; $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++ % 1000000]; $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++ % 1000000], 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:

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

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows 7

View result in a separate tab

Test name	Executions per second
fillRect/concat	356.3 Ops/sec
fillRect/join	340.5 Ops/sec
1×1 Image Data	3164.2 Ops/sec

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 various components.

**Benchmark Overview**

The benchmark is designed to test the performance of drawing 1x1 pixels on a canvas element using different approaches. The benchmark creates an array of 1 million pixel data objects, each representing a single pixel with red, green, blue, and alpha channels. It then uses these pixel data objects to draw 1x1 pixels on a canvas element.

**Script Preparation Code**

The script preparation code initializes the following variables:

* `$c`: a reference to the canvas element
* `$ctx`: a 2D drawing context for the canvas element
* `$pxls`: an array of 1 million pixel data objects

The code also clears the canvas element and creates a new image data object `$px`.

**Html Preparation Code**

The HTML preparation code sets up the basic structure for the benchmark, including:

* A canvas element with a width of 800 pixels and a height of 300 pixels
* An ID attribute set to "c"

**Individual Test Cases**

There are three test cases, each defining a different approach to drawing 1x1 pixels on the canvas element.

### Test Case: `fillRect/concat`

This test case uses string concatenation to build the color string for each pixel:

```javascript
$ctx.fillStyle = 'rgba(' + px.r + ',' + px.g + ',' + px.b + ',' + (px.a / 255) + ')';
```

The pros of this approach are that it's concise and easy to read. However, it may lead to slower performance due to the overhead of string concatenation.

### Test Case: `fillRect/join`

This test case uses an array join method to build the color string for each pixel:

```javascript
$ctx.fillStyle = 'rgba(' + [px.r,px.g,px.b,px.a/255].join() + ')';
```

The pros of this approach are that it's potentially faster than concatenation because it avoids creating temporary strings. However, it may be less readable than the other approach.

### Test Case: `1×1 Image Data`

This test case uses the `putImageData` method to draw 1x1 pixels on the canvas element:

```javascript
$ctx.putImageData($px, px.x, px.y);
```

The pros of this approach are that it's potentially faster than other approaches because it avoids manual drawing. However, it may be less efficient due to the overhead of creating an image data object.

**Library: 2D Drawing Context**

The `$ctx` variable is a 2D drawing context for the canvas element. It provides methods for drawing shapes, lines, and text on the canvas.

**Special JS Feature: None**

There are no special JavaScript features or syntax used in this benchmark that would require additional explanation.

**Other Alternatives**

If you were to rewrite this benchmark using alternative approaches, here are a few options:

* Using WebAssembly (WASM) for performance-critical code
* Using parallel processing libraries like Web Workers or async/await
* Optimizing the pixel data storage and iteration algorithms
* Using different canvas element sizes or aspect ratios

Related benchmarks:

Setting Canvas Pixel test (version: 0)

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

Created: 4 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

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