Benchmark: Get and Put image data on a canvas

HTML Preparation code:

<canvas id='drawcan' width='512' height='512'></canvas>

Script Preparation code:

var drawCon = document.getElementById('drawcan').getContext('2d');

Tests:

get and set
var imageData = drawCon.getImageData(0,0,512,512); drawCon.putImageData(imageData,0,0);
get, paint, and set
var imageData = drawCon.getImageData(0,0,512,512); for (var i = 0; i < 200; i++) { for (var j = 0; j < 200; j++) { imageData[i*512+j] = 0xff00ff; } } drawCon.putImageData(imageData,0,0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
get and set
get, paint, and set

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.1.1

View result in a separate tab

Test name	Executions per second
get and set	1243.7 Ops/sec
get, paint, and set	1064.6 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down what's happening in this benchmark test.

**Benchmark Description**

The benchmark is called "Get and Put image data on a canvas." It involves working with image data on a HTML5 canvas element, specifically:

1. Getting the image data using `getImageData()` method
2. Putting the image data back onto the canvas using `putImageData()` method

There are two test cases:

**Test Case 1: "get and set"**

* The script preparation code creates a canvas context.
* The benchmark definition code gets the image data from the entire canvas (512x512 pixels) using `getImageData()`.
* It then puts the image data back onto the canvas at position (0,0) using `putImageData()`.

**Test Case 2: "get, paint, and set"**

* Similar to Test Case 1, it gets the image data from the entire canvas.
* However, instead of simply putting the image data back, it loops through each pixel (200x200 times) and sets a new color value (`0xff00ff`) for each pixel in memory. This is done using simple assignment `imageData[i*512+j] = 0xff00ff;`.
* Finally, it puts the modified image data back onto the canvas.

**Library Used**

None, this test uses only built-in JavaScript and HTML5 Canvas API methods.

**JS Feature or Syntax**

The test uses:

1. `getImageData()` method to get the pixel data from the canvas.
2. `putImageData()` method to put the pixel data back onto the canvas.
3. `for` loops for iteration, which is a basic JavaScript syntax.
4. Simple assignment `=` operator to modify pixel values.

**Comparison and Alternatives**

This benchmark compares the performance of two approaches:

1. **Get and set**: Simply getting the image data from the canvas and putting it back without modification.
2. **Get, paint, and set**: Getting the image data, modifying it in memory (by setting new color values), and then putting it back onto the canvas.

Other alternatives to consider:

* Using `createImageData()` method to create a new pixel array instead of getting it from the canvas using `getImageData()`.
* Using Web Workers or other concurrency techniques to parallelize image data processing.
* Implementing more sophisticated image filtering algorithms that take advantage of GPU acceleration.

Regarding pros and cons:

* **Get and set** approach is simple, but may not utilize any optimizations or caching mechanisms available in the browser.
* **Get, paint, and set** approach allows for manual modification of pixel values, which can be useful for specific image processing tasks. However, it introduces additional overhead due to loop iterations and assignments.

Keep in mind that these test cases are designed to measure performance on a particular task, and may not reflect real-world usage scenarios or other benchmarking criteria.

Related benchmarks:

Get and Put image data on a canvas (version: 0)

Comparing performance of: get and set vs get, paint, and set

Created: 7 years ago by: Guest

Jump to the latest result

get and set

get, paint, and set

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):