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 gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark tests how efficiently JavaScript can work with image data on a canvas.

Let's break down the options being compared:

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

*  This case simply retrieves all pixel data from a specific area of the canvas using `getImageData` and then immediately puts it back using `putImageData`. It measures the pure overhead of these operations.

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

* This case adds an extra step: modifying the retrieved image data by setting each pixel within a specific region to a purple color (0xff00ff). Then, it puts the modified data back onto the canvas.  This tests not only the data retrieval/placement but also the performance of direct pixel manipulation within JavaScript.

**Pros and Cons:**

* **"get and set":**
    * **Pro:**  Provides a baseline measurement of fundamental image data handling. 
    * **Con:** Doesn't reflect realistic scenarios where you'd likely modify image data before placing it back on the canvas.

* **"get, paint, and set":**
    * **Pro:** More representative of common image processing tasks.  
    * **Con:** Introducing pixel manipulation adds complexity and potentially obscures the pure performance of the `getImageData`/`putImageData` operations.

**Other Considerations:**

* **Canvas Size:** The benchmark uses a 512x512 canvas. Different sizes would affect performance due to the amount of data being processed.
* **Browser/Device:**  JavaScript engine implementations and hardware capabilities vary significantly between browsers and devices, influencing benchmark results.

**Alternatives:**

Instead of relying solely on `getImageData`/`putImageData`, you could explore alternatives for specific image manipulation tasks:

* **Canvas API Methods:** Canvas provides methods like `fillRect`, `drawImage`, `strokeRect`, etc., which might be more efficient for certain operations than manually working with pixel data.
* **Image Processing Libraries:**  Libraries like OpenCV.js offer optimized algorithms and data structures for complex image processing tasks, potentially exceeding the performance of raw JavaScript manipulation.

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 gemma2:9b, generated one year ago):