Benchmark: Canvas Pixel vs Fill rect

HTML Preparation code:

<canvas id="c" width="1000" height="500"></canvas>

Script Preparation code:

$c = document.getElementById('c');
$ctx = $c.getContext('2d');
$ctx.clearRect(0, 0, 10000, 500);
$px = $ctx.createImageData(1000, 500);
$pxls = [];
for (var i=0; i<500000; ++i) $pxls.push({
   x: Math.random() * 1000 << 0,
   y: Math.random() * 500 << 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:

1*1 fillRect/concat
for (var i=1000;i--;){ for(var j=500;j--;){ var px = $pxls[i*j] $ctx.fillStyle = 'rgba(' + px.r + ',' + px.g + ',' + px.b + ',' + (px.a / 255) + ')'; $ctx.fillRect(px.x, px.y, 1, 1); } }
Image Data
for (var i=0; i<500000; ++i){ var px=$pxls[i], d=$px.data[i]; d[0] = px.r; d[1] = px.g; d[2] = px.b; d[3] = px.a; } $ctx.putImageData($px, 1000,500);

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 19 runs

Image Data

2/s

1*1 fillRect/concat

1/s

Fastest: Image Data (1.8x faster)

View exact numbers

✓ Image Data: 2 ops/sec
• 1*1 fillRect/concat: 1 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1*1 fillRect/concat
Image Data

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 140 on Windows

View result in a separate tab

Image Data

4/s

1*1 fillRect/concat

3/s

View exact numbers

Test name	Executions per second
✓ Image Data	4 Ops/sec
1*1 fillRect/concat	3 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 provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark measures the performance of two approaches to rendering pixels on a 2D canvas:

1. **`for (var i=1000;i--;){ for(var j=500;j--;){ ... }}`**: This loop iterates over the `500000` pixel data points in the `$pxls` array, and for each point, it sets the fill style to the corresponding RGBA value and fills a 1x1 rectangle at the specified x and y coordinates.
2. **`for (var i=0; i<500000; ++i){ ... }$ctx.putImageData($px, 1000, 500);`**: This loop creates an image data object (`d`) from the `$pxls` array and then uses the `putImageData` method to render it at position `(1000, 500)` on the canvas.

**Comparison**

The benchmark compares the performance of these two approaches:

1. **`for (var i=1000;i--;){ for(var j=500;j--;){ ... }}`**: This approach involves multiple loops: one loop over the x-axis and another loop over the y-axis, resulting in a nested loop structure.
2. **`for (var i=0; i<500000; ++i){ ... }$ctx.putImageData($px, 1000, 500);`**: This approach uses a single loop to iterate over the pixel data points and then uses `putImageData` to render them.

**Pros and Cons**

1. **`for (var i=1000;i--;){ for(var j=500;j--;){ ... }}`**:
	* Pros: Avoids using `putImageData`, which might be slower due to its use of native image rendering.
	* Cons: Has a higher overhead due to the nested loops, which can lead to slower performance for large datasets.
2. **`for (var i=0; i<500000; ++i){ ... }$ctx.putImageData($px, 1000, 500);`**:
	* Pros: Uses `putImageData`, which is optimized for rendering images, and avoids the overhead of nested loops.
	* Cons: Requires creating an image data object, which might be slower due to its creation.

**Other Considerations**

* The use of `rgba()` functions in both approaches can affect performance since they involve string concatenation and function calls.
* The benchmark uses a relatively small canvas size (1000x500) and a large dataset (`500000` pixels). Larger datasets would amplify the performance differences between these two approaches.

**Alternative Approaches**

Other possible approaches to rendering pixels on a 2D canvas could include:

1. **Using `canvasRenderingContext2D.fillStyle` with `rgba()` functions**: This approach involves setting the fill style directly and using the `rgba()` function to create an RGBA value.
2. **Using `WebGL` or `WebGL-1.0`**: These approaches involve rendering pixels using WebGL, which can provide better performance for complex graphics.

Note that these alternative approaches would require significant changes to the benchmark code and might not be directly comparable to the provided approaches.

Canvas Pixel vs Fill rect (version: 0)

Comparing performance of: `1*1 fillRect/concat vs Image Data`

Created: 5 years ago by: Guest

Go to the latest result

1*1 fillRect/concat

Image Data

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 19 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Canvas Pixel vs Fill rect (version: 0)

Comparing performance of: 1*1 fillRect/concat vs Image Data

Created: 5 years ago by: Guest

Go to the latest result

1*1 fillRect/concat

Image Data

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 19 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `1*1 fillRect/concat vs Image Data`