Benchmark: testing canvas - MeasureThat.net

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:

test1
for (var i=0; i < 1000000; i++){ var px = $pxls[i]; $ctx.fillStyle = 'rgba(' + px.r + ',' + px.g + ',' + px.b + ',' + (px.a / 255) + ')'; $ctx.fillRect(px.x, px.y, 1, 1); }
test2
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); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
test1
test2

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Browser/OS: Chrome 91 on Linux

View result in a separate tab

Test name	Executions per second
test1	0.4 Ops/sec
test2	648.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is a crucial task, and MeasuringThat.net provides a great platform for benchmarking.

**Benchmark Overview**

The provided benchmark tests the rendering speed of a canvas element with a large number of pixels (1 million). The script generates random pixel coordinates, red, green, blue, and alpha values, which are then used to draw a small rectangle on the canvas. The goal is to measure how fast each browser can render these rectangles.

**Script Preparation Code**

The script preparation code sets up the necessary variables:

* `$c` and `$ctx` refer to the `canvas` element and its 2D drawing context, respectively.
* `$px` is an image data object created with a size of 1x1 pixel.
* `$pxls` is an array that will store the generated pixels. In this case, it's initialized with 1000000 empty objects.

The script then generates random values for each pixel in the `$pxls` array and assigns them to corresponding properties (e.g., `x`, `y`, `r`, `g`, `b`, `a`). The `Math.random()` function is used to generate pseudo-random numbers within a specified range.

**Html Preparation Code**

The HTML preparation code creates an `<canvas>` element with the dimensions 800x300, which will be used for rendering the pixels. The `id` attribute is set to "c", and the width and height attributes are explicitly set to 800 and 300, respectively.

**Test Cases**

There are two test cases:

1. **test1**: This test case uses a traditional `for` loop with an index variable (`i`) that increments from 0 to 1000000.
2. **test2**: This test case uses a different approach: it decrements the index variable (`i`) from 99999 down to 0, using the modulo operator (`%`) to wrap around the `$pxls` array.

**Comparison of Approaches**

The two approaches differ in their use of indexing and loops:

* **test1**: Uses a traditional `for` loop with a fixed increment value. This approach is straightforward but might lead to slower performance due to the constant increment.
* **test2**: Uses a decrementing index variable with modulo wrapping. This approach can take advantage of the CPU's ability to handle wrap-around increments, potentially leading to faster performance.

**Pros and Cons**

* **test1**: Pros: easier to understand, less prone to errors. Cons: might be slower due to the fixed increment.
* **test2**: Pros: potential for better performance due to optimized indexing. Cons: can be harder to understand, more prone to errors.

**Library Usage**

In both test cases, no libraries are explicitly mentioned or used. The JavaScript code is self-contained and uses only built-in functions and operators.

**Special JS Features**

No special JavaScript features or syntax are used in this benchmark. It's a straightforward example of using canvas elements and loops for performance testing.

**Other Alternatives**

If you want to explore alternative approaches, here are some options:

* Use a different rendering technique, such as SVG or WebGL.
* Add more complex pixel data structures or layouts.
* Experiment with different browser-specific features or APIs (e.g., WebAssembly, asm.js).
* Try using a benchmarking library like Benchmark.js or jsperf.

Keep in mind that the choice of approach depends on your specific testing goals and requirements.

Related benchmarks:

testing canvas (version: 0)

Comparing performance of: test1 vs test2

Created: 3 years ago by: Guest

Jump to the latest result

test1

test2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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