Benchmark: Setting Canvas Pixel 4

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/optimized further
const alphmult = 1 / 255 for (let i=500;--i;){ const px = $pxls[++$i % 10000]; $ctx.fillStyle = `rgba(${px.r},${px.g},${px.b},${px.a * alphmult})`; $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/optimized further

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 136 on Windows

View result in a separate tab

Test name	Executions per second
fillRect/concat	1655.0 Ops/sec
fillRect/optimized further	1739.1 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 definition and test cases.

**Benchmark Definition**

The benchmark measures the performance of two approaches for filling rectangles on a canvas element:

1. `fillRect/concat`: This approach concatenates the RGB and alpha values in a string, followed by calling `fillRect` with the resulting string as the fill style.
2. `fillRect/optimized further`: This approach uses a lookup table to optimize the calculation of the fill style string.

**Options Compared**

The two approaches are compared in terms of performance:

* Execution count: The number of times each approach is executed within a second (measured by `ExecutionsPerSecond`).
* Browser and device information: The benchmark reports the browser type, version, platform, operating system, and execution frequency for each test case.

**Pros and Cons**

1. `fillRect/concat`:
	* Pros: Simple implementation, easy to understand.
	* Cons: May lead to slower performance due to string concatenation.
2. `fillRect/optimized further`:
	* Pros: Optimized calculation of fill style string, potentially faster performance.
	* Cons: More complex implementation, harder to understand.

**Library Used**

The benchmark uses the `Canvas` API, which is a part of the HTML5 specification. The library used is built-in to most modern browsers, making it easily accessible and widely supported.

**Special JS Feature or Syntax**

The benchmark uses JavaScript features such as:

* `for...in` loop (used in the `fillRect/concat` approach).
* Template literals (`const alphmult = 1 / 255\r\nfor (let i=500;--i;){\r\nconst px = $pxls[++$i % 10000];\r\n$ctx.fillStyle = `rgba(${px.r},${px.g},${px.b},${px.a * alphmult})`;\r\n}`) (used in the `fillRect/optimized further` approach).

**Other Considerations**

When running this benchmark, it's essential to note that:

* The performance differences between the two approaches may be negligible for most use cases.
* The `Canvas` API is designed for 2D graphics rendering and may not be optimized for every possible use case.
* Other factors, such as the browser's rendering engine and hardware capabilities, can affect the benchmark results.

**Alternative Benchmarking Scenarios**

Other alternatives to this benchmark could include:

* Measuring the performance of other drawing operations on a canvas element, such as `drawImage` or `putImageData`.
* Comparing the performance of different graphics libraries or frameworks.
* Testing the rendering performance of more complex graphics scenarios, such as animated scenes or interactive simulations.

By considering these alternatives, you can gain a better understanding of your specific use case and choose the most relevant benchmarking approach.

Related benchmarks:

Setting Canvas Pixel 4 (version: 0)

Comparing performance of: fillRect/concat vs fillRect/optimized further

Created: 6 years ago by: Guest

Jump to the latest result

fillRect/concat

fillRect/optimized further

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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