Benchmark: PutImageData vs DrawImage vs GetImageData + PutImageData

PutImageData vs DrawImage vs GetImageData + PutImageData (version: 0)

copying canvas with PutImageData vs DrawImage Also copying canvas with GetImageData + PutImageData vs DrawImage

Comparing performance of: DrawImage copy canvas -> canvas vs PutImageData copy imgData -> canvas vs PutImageData copy canvas -> imgData -> canvas

Created: 5 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<canvas id='master' width='1000' height='1000'></canvas>
<canvas id='pid' width='1000' height='1000'></canvas>
<canvas id='pid2' width='1000' height='1000'></canvas>

Script Preparation code:

var canvas = document.getElementById('master');
var ctx = canvas.getContext('2d');
var pid = document.getElementById('pid').getContext('2d');
var pid2 = document.getElementById('pid2').getContext('2d');
var imgData;
var width = 1000;
var height = 1000;
ctx.width = width;
ctx.height = height;
ctx.fillStyle = "red";

// DRAW SOME BLOCKS
for (let i=0; i<width; i+=50) {
  ctx.fillRect(i,0,50,50);
  ctx.fillRect(i,(height/2)-25,50,50);
  ctx.fillRect(i,height-50,50,50);
}
for (let i=0; i<height; i+=50) {
  ctx.fillRect(0,i,50,50);
  ctx.fillRect((width/2)-25,i,50,50);
  ctx.fillRect(width-50,i,50,50);
}

// PRE-COPY IMG DATA
imgData = ctx.getImageData(0,0,width,height);

Tests:

DrawImage copy canvas -> canvas
pid.drawImage(canvas,0,0);
PutImageData copy imgData -> canvas
pid2.putImageData(imgData,0,0);
PutImageData copy canvas -> imgData -> canvas
let imgDataLocal = ctx.getImageData(0,0,width,height); pid2.putImageData(imgDataLocal,0,0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DrawImage copy canvas -> canvas
PutImageData copy imgData -> canvas
PutImageData copy canvas -> imgData -> canvas

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 16 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Browser/OS: Chrome 148 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
DrawImage copy canvas -> canvas	105581.3 Ops/sec
PutImageData copy imgData -> canvas	1024.9 Ops/sec
PutImageData copy canvas -> imgData -> canvas	732.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark.

**What is being tested?**

The test measures the performance of three different approaches for copying pixels from one 2D drawing context to another on a canvas element:

1. `DrawImage`: Drawing an image onto another canvas using the `drawImage` method.
2. `PutImageData + GetImageData`: Getting the pixel data from the source context, manipulating it (in this case, doing nothing), and then putting it back into the destination context using the `putImageData` method.

**Options compared**

The test compares the performance of these three approaches:

* `DrawImage`
* `PutImageData + GetImageData`

These two options are compared because they involve different steps: one is a simple drawing operation, while the other involves an extra step of getting and putting pixel data.

**Pros and Cons**

Here's a brief summary of each approach:

1. **DrawImage**
	* Pros:
		+ Simple and straightforward
		+ Fast and efficient
	* Cons:
		+ Can be slower for large images or complex graphics
2. **PutImageData + GetImageData**
	* Pros:
		+ Allows for more control over the copying process (e.g., pixel manipulation)
	* Cons:
		+ More steps involved, which can increase overhead
		+ May require additional memory allocation

**Library and purpose**

The `getImageData` method is a part of the 2D drawing context API. It allows you to retrieve the raw pixel data from the canvas element.

In this benchmark, `PutImageData + GetImageData` uses `getImageData` to get the pixel data from the source context, which is then manipulated (in this case, doing nothing) before being put back into the destination context using `putImageData`.

**Special JS feature or syntax**

None mentioned in this specific benchmark.

**Other alternatives**

For copying pixels between canvases, other options might include:

* Using the WebAssembly (WASM) `CanvasCopy` instruction, which provides a more efficient way of copying pixel data.
* Utilizing WebGL shaders to perform the copy operation.
* Employing a library like Pixi.js or Fabric.js, which provide optimized canvas manipulation functions.

Keep in mind that these alternatives might have their own set of pros and cons, and may not be suitable for all use cases.

Related benchmarks: