Benchmark: Setting Canvas Pixel with 1M iterations

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);
$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++ % 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:

Run details: (Test run date: 5 months ago)

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

Browser/OS: Opera 120 on Windows

View result in a separate tab

Test name	Executions per second
fillRect/concat	1434.0 Ops/sec
fillRect/join	1359.7 Ops/sec
1×1 Image Data	52.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**What is being tested?**

On MeasurThat.net, users can create and run JavaScript microbenchmarks to compare the performance of different approaches in various scenarios. In this case, we're looking at three individual test cases for a specific benchmark: "Setting Canvas Pixel with 1M iterations".

The goal of this benchmark is to measure the performance of different ways to set pixel values on an HTML canvas element.

**Test options and their pros/cons**

There are three test options:

### Option 1: `fillRect` with concatenation (`"fillRect/concat"`)

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

Pros:

* Simple and straightforward code.
* Easy to understand and maintain.

Cons:

* Concatenation can be slow due to the number of string operations involved.

### Option 2: `fillRect` with array join (`"fillRect/join"`)

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

Pros:

* Avoids concatenation issues.
* Can be faster due to the use of array operations.

Cons:

* Requires more memory allocation and copying.
* Code can be less readable due to the use of arrays.

### Option 3: `putImageData` with pixel data manipulation (`"1×1 Image Data"`)

```javascript
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);
```

Pros:

* Can be faster due to the direct manipulation of pixel data.
* Reduces overhead compared to `fillRect` methods.

Cons:

* Requires manual memory management and data copying.
* Code can be less readable due to the use of pointer arithmetic.

**Library usage:**

In this benchmark, two libraries are used:

1. **Canvas**: The Canvas API provides a way to render 2D graphics on the web. In this benchmark, it's used to set pixel values on an HTML canvas element.
2. **JavaScript core engine**: MeasurThat.net uses a JavaScript core engine (not explicitly stated) to execute and measure the performance of the test cases.

**Special JS features or syntax:**

There are no special JavaScript features or syntax mentioned in this benchmark. The code is written in standard JavaScript and relies on the Canvas API for its functionality.

**Alternatives:**

For measuring performance, MeasurThat.net provides alternatives to the `fillRect` methods:

1. **WebGL**: An alternative 3D rendering API that can also be used for 2D graphics.
2. **Pixel perfect rendering libraries**: Specialized libraries like Pixi.js or Fabric.js provide optimized rendering capabilities and might outperform Canvas in certain scenarios.

Keep in mind that the performance results may vary depending on the specific use case, hardware, and software configuration.

Related benchmarks:

Setting Canvas Pixel with 1M iterations (version: 0)

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

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