Benchmark: Canvas Performance 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<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
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); }
putImage
var image = $ctx.createImageData($c.width, $c.height); for (var i=500;i--;){ var px=$pxls[$i++ % 10000], d=$px.data; var _pidx = i * 4; image.data[_pidx] = px.r; image.data[_pidx+1] = px.g; image.data[_pidx+2] = px.b; image.data[_pidx+3] = px.a; } $ctx.putImageData(image, 0, 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
fillRect
putImage

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its components.

**Benchmark Overview**

The benchmark, called "Canvas Performance Test", measures the performance of two specific JavaScript functions: `fillRect` and `putImage`. These functions are used to manipulate image data on a 2D canvas context. The test creates an array of random pixel colors and then repeatedly draws each pixel at a random location on the canvas.

**Options Compared**

The benchmark compares the performance of two approaches:

1. **Directly accessing and drawing pixels using `fillStyle`**: This method uses the `fillStyle` property to set the color of the stroke, and then calls `fillRect` with the x, y, width, and height of each pixel.
2. **Creating an image data object and using `putImageData`**: This method creates an image data object from scratch, populates it with the pixel colors, and then uses `putImageData` to draw the entire image on the canvas.

**Pros and Cons**

1. **Directly accessing and drawing pixels using `fillStyle`**:
	* Pros: Simple and efficient, as it only requires a single function call.
	* Cons: May not be as accurate or precise, as it relies on the browser's internal implementation of `fillRect`.
2. **Creating an image data object and using `putImageData`**:
	* Pros: More accurate and precise, as it provides direct access to the pixel data.
	* Cons: Requires more resources (memory) and is generally slower due to the overhead of creating and manipulating the image data.

**Library**

There are no external libraries mentioned in the benchmark. The test relies solely on the built-in JavaScript `Canvas` API.

**Special JS Feature/Syntax**

The benchmark uses a few special features:

1. **Use of the `$` symbol**: This is a custom variable used to access the canvas and its context, likely for simplicity or convention.
2. **Bitwise shifts (`<< 0`)**: Used to create integers with specific values (e.g., `Math.random() * 255 << 0`) without affecting the fractional part of the result.

**Alternatives**

Other alternatives could include:

1. Using a different color format, such as RGBA or HSL.
2. Employing other image manipulation techniques, like blending modes or pixel shaders.
3. Optimizing the test for specific browser versions or architectures.
4. Using a more complex or realistic canvas setup, with multiple layers or graphics.

In summary, the benchmark compares two efficient ways to draw random pixels on a 2D canvas context, highlighting the trade-offs between direct access and manipulation of pixel data versus creating an image data object.

Latest run results:

Run details: (Test run date: yesterday)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
fillRect	307.4 Ops/sec
putImage	456.7 Ops/sec

Related benchmarks:

Canvas Performance Test (version: 2)

Comparing performance of: fillRect vs putImage

Created: 6 years ago by: Registered User

Jump to the latest result

fillRect

putImage

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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