Benchmark: JS typed arrays - 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<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:

Typed Array canvas image manipulation
for (var i=500;i--;){ var canvasWidth = $c.width; var canvasHeight = $c.height; var imageData = $ctx.getImageData(0, 0, canvasWidth, canvasHeight); var buf = new ArrayBuffer(imageData.data.length); var buf8 = new Uint8ClampedArray(buf); var data = new Uint32Array(buf); for (var y = 0; y < canvasHeight; ++y) { for (var x = 0; x < canvasWidth; ++x) { var value = x * y & 0xff; data[y * canvasWidth + x] = (255 << 24) | // alpha (value << 16) | // blue (value << 8) | // green value; // red } } imageData.data.set(buf8); $ctx.putImageData(imageData, 0, 0); }
Conventional canvas Image manipulation
for (var i=500;i--;){ var canvasWidth = $c.width; var canvasHeight = $c.height; var imageData = $ctx.getImageData(0, 0, canvasWidth, canvasHeight); var data = imageData.data; for (var y = 0; y < canvasHeight; ++y) { for (var x = 0; x < canvasWidth; ++x) { var index = (y * canvasWidth + x) * 4; var value = x * y & 0xff; data[index] = value; // red data[++index] = value; // green data[++index] = value; // blue data[++index] = 255; // alpha } } $ctx.putImageData(imageData, 0, 0); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Typed Array canvas image manipulation
Conventional canvas Image manipulation

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; rv:102.0) Gecko/20100101 Firefox/102.0

Browser/OS: Firefox 102 on Windows

View result in a separate tab

Test name	Executions per second
Typed Array canvas image manipulation	0.5 Ops/sec
Conventional canvas Image manipulation	0.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Description**

The benchmark compares two approaches to manipulating images on a canvas:

1. **Conventional Canvas**: This approach uses the `putImageData` method to draw pixels directly onto the canvas.
2. **Typed Array Canvas**: This approach uses typed arrays (specifically, `Uint8ClampedArray`) to store pixel data and then uses the `putImageData` method.

**Benchmark Definition**

The benchmark definition consists of two test cases:

1. **Conventional Canvas Image Manipulation**:
	* Creates a canvas element and gets its context.
	* Clears the canvas.
	* Creates an image data object with the same dimensions as the canvas.
	* Iterates over each pixel in the image data, sets the corresponding pixels in the canvas using `putImageData`.
2. **Typed Array Canvas Image Manipulation**:
	* Similar to the conventional approach, but uses a typed array (`Uint8ClampedArray`) to store pixel data instead of an image data object.
	* Iterates over each pixel in the typed array and sets the corresponding pixels in the canvas using `putImageData`.

**Pros and Cons**

**Conventional Canvas:**

Pros:

* Easier to understand and implement, as it uses a well-known API (`putImageData`).
* Can be more efficient for small images or simple manipulation.

Cons:

* May be slower due to the overhead of creating an image data object and processing its data.
* Less optimized compared to typed arrays.

**Typed Array Canvas:**

Pros:

* Can be faster, as it avoids the overhead of creating an image data object and processes pixel data directly in memory.
* Optimized for performance, as it uses a specialized array type (`Uint8ClampedArray`).

Cons:

* More complex to implement, as it requires understanding typed arrays and their manipulation.
* May require more manual bookkeeping to ensure correct pixel values.

**Library and Special JS Features**

* The benchmark uses the `Canvas` API, which is a part of the HTML5 specification. No external libraries are required.
* There are no special JavaScript features mentioned in the benchmark definition or test cases.

**Other Alternatives**

Other alternatives for manipulating images on a canvas include:

1. **WebGL**: A low-level graphics API that can be used to render 3D graphics, but is not typically used for 2D image manipulation.
2. **Canvas pixel manipulation libraries**: There are third-party libraries available that provide optimized pixel manipulation functions, such as CanvasPixel or PixelPerfect.

Keep in mind that the choice of approach depends on the specific use case and performance requirements.

Related benchmarks:

JS typed arrays (version: 0)

Tests conventional canvas manipulation vs using typed arrays as discussed here: https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/

Comparing performance of: Typed Array canvas image manipulation vs Conventional canvas Image manipulation

Created: one year ago by: Guest

Jump to the latest result

Typed Array canvas image manipulation

Conventional canvas Image manipulation

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