Benchmark: PutImageData vs DrawImage vs GetImageData + PutImageData

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

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Firefox 5 runs

DrawImage copy canvas -> canvas

132K/s

PutImageData copy imgData -> canvas

311/s

PutImageData copy canvas -> imgData -> canvas

223/s

Fastest: DrawImage copy canvas -> canvas (592.8x faster)

View exact numbers

✓ DrawImage copy canvas -> canvas: 131,950 ops/sec
• PutImageData copy imgData -> canvas: 311 ops/sec
• PutImageData copy canvas -> imgData -> canvas: 223 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 19 days ago)

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

Browser/OS: Firefox 152 on Windows

View result in a separate tab

DrawImage copy canvas -> canvas

178K/s

PutImageData copy imgData -> canvas

311/s

PutImageData copy canvas -> imgData -> canvas

223/s

View exact numbers

Test name	Executions per second
✓ DrawImage copy canvas -> canvas	177,525 Ops/sec
PutImageData copy imgData -> canvas	311 Ops/sec
PutImageData copy canvas -> imgData -> canvas	223 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.

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

Go to the latest result

DrawImage copy canvas -> canvas

PutImageData copy imgData -> canvas

PutImageData copy canvas -> imgData -> canvas

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

DrawImage copy canvas -> canvas

PutImageData copy imgData -> canvas

PutImageData copy canvas -> imgData -> canvas

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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