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

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 28 runs

putImage

2K/s

fillRect

1K/s

Fastest: putImage (1.4x faster)

View exact numbers

✓ putImage: 1,542 ops/sec
• fillRect: 1,125 ops/sec

Firefox 6 runs

putImage

2K/s

fillRect

1K/s

Fastest: putImage (1.9x faster)

View exact numbers

✓ putImage: 2,069 ops/sec
• fillRect: 1,109 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
fillRect
putImage

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 136 on Linux

View result in a separate tab

putImage

2K/s

fillRect

826/s

View exact numbers

Test name	Executions per second
✓ putImage	1,647 Ops/sec
fillRect	826 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 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.

Canvas Performance Test (version: 2) Benchmark.js

Comparing performance of: `fillRect vs putImage`

Created: 8 years ago by: Registered User

Go to the latest result

fillRect

putImage

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 28 runs

Firefox 6 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 Performance Test (version: 2) Benchmark.js

Comparing performance of: fillRect vs putImage

Created: 8 years ago by: Registered User

Go to the latest result

fillRect

putImage

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 28 runs

Firefox 6 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: `fillRect vs putImage`