Benchmark: Setting multiple canvas pixels

HTML Preparation code:

<canvas id="c" width="800" height="1"></canvas>

Script Preparation code:

$N = 800;

$c = document.getElementById('c');
$ctx = c.getContext('2d');

$ctx.clearRect(0, 0, $N, 1);
$pxls = [];
for (let i = 0; i < $N; ++i) {
    $pxls.push({
        r: Math.random() * 255 << 0,
        g: Math.random() * 255 << 0,
        b: Math.random() * 255 << 0
    });
}

Tests:

FillRect
for (let i = 0; i < $N; i++) { let px = $pxls[i]; $ctx.fillStyle = 'rgb(' + px.r + ',' + px.g + ',' + px.b + ')'; $ctx.fillRect(i, 0, 1, 1); }
PutImageData
const imageData = $ctx.createImageData($N, 1); const data = imageData.data; for (let i = 0; i < $N; i++) { let px = $pxls[i]; data[i * $N * 4 + 0] = px.r; data[i * $N * 4 + 1] = px.g; data[i * $N * 4 + 2] = px.b; data[i * $N * 4 + 3] = 255; } $ctx.putImageData(imageData, 0, 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
FillRect
PutImageData

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0

Browser/OS: Firefox 141 on Windows

View result in a separate tab

Test name	Executions per second
FillRect	849.9 Ops/sec
PutImageData	102967.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

On the provided JSON, we have two test cases: "FillRect" and "PutImageData". These test cases are designed to measure the performance of filling pixels on an HTML canvas element using JavaScript.

In general, these tests aim to compare the speed of two different approaches:

1. **FillRect**: This approach uses the `fillRect` method directly on the canvas context to fill each pixel individually.
2. **PutImageData**: This approach uses the `createImageData` method to create an image data object, populates it with the pixel values, and then applies this image data to the canvas using the `putImageData` method.

**Options being compared**

The two approaches have different pros and cons:

* **FillRect**:
	+ Pros: Simple and straightforward. Each pixel is filled individually, which can be beneficial for small to medium-sized canvases.
	+ Cons: Can be slower due to the overhead of repeated calls to `fillRect` and possibly causing browser rendering pauses.
* **PutImageData**:
	+ Pros: Can be faster because it uses a bulk operation ( filling the image data) followed by a single call to `putImageData`, which can be optimized by the browser's renderer. Additionally, this method avoids repeated calls to `fillRect`.
	+ Cons: May require more memory for storing the image data object and can lead to slower performance if the canvas is very large.

**Library usage**

In both test cases, we see that JavaScript's built-in canvas API (`document.getElementById('c').getContext('2d')`) is used to interact with the canvas element. The `createImageData` method is part of this API, which allows us to create an image data object from a specified width and height.

**Special JS features or syntax**

There are no specific JavaScript features or syntax mentioned in the provided code that would be unique to these test cases. However, it's worth noting that using canvas elements with JavaScript is a fundamental part of creating interactive graphics and animations on the web.

**Other alternatives**

If you're looking for alternative ways to fill pixels on an HTML canvas element, here are some options:

1. **ImageDataDraw**: This is a library specifically designed for fast and efficient rendering of images on the Web. It provides a high-level API for working with image data and can be used as a drop-in replacement for `createImageData` and `putImageData`.
2. **Canvas Pixel Manipulation**: There are also various libraries, such as `canvas-pixel-manipulation`, that provide functions for manually manipulating individual pixels on the canvas element.
3. ** WebGL or WebGPU**: If you need to perform complex graphics rendering, consider using WebGL or WebGPU APIs, which can provide better performance and more control over graphics rendering.

Keep in mind that these alternatives might have different trade-offs and requirements compared to the built-in `createImageData` and `putImageData` methods.

Related benchmarks:

Setting multiple canvas pixels (version: 0)

Comparing performance of: FillRect vs PutImageData

Created: 2 years ago by: Guest

Jump to the latest result

FillRect

PutImageData

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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