Benchmark: PutImageData vs DrawImage (big canvases)

HTML Preparation code:

<canvas id='master' width='500' height='500'></canvas>
<canvas id='pid' width='200' height='200'></canvas>
<canvas id='di' width='200' height='200'></canvas>

Script Preparation code:

var master = document.getElementById('master');
var masterctx = master.getContext('2d');
var pid = document.getElementById('pid').getContext('2d');
var di = document.getElementById('di').getContext('2d');

masterctx.fillRect(0,0,50,50);
masterctx.fillStyle = "red";
masterctx.fillRect(50,50,100,100);

Tests:

DrawImage
di.drawImage(master,0,0);
DrawImage (subrectangle)
di.drawImage(master,0,0,200,200,0,0,200,200);
PutImageData
let imgData = masterctx.getImageData(0,0,500,500); pid.putImageData(imgData,0,0);
PutImageData (subrectangle)
let imgData = masterctx.getImageData(0,0,200,200); pid.putImageData(imgData,0,0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DrawImage
DrawImage (subrectangle)
PutImageData
PutImageData (subrectangle)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
DrawImage	694427.1 Ops/sec
DrawImage (subrectangle)	705198.9 Ops/sec
PutImageData	1470.3 Ops/sec
PutImageData (subrectangle)	8690.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 what's being tested in the provided benchmark.

**Benchmark Purpose:**
The benchmark is designed to compare the performance of two approaches for rendering large images on a canvas:

1. **DrawImage**: Using the `drawImage` method, which draws an image from its source canvas onto the target canvas.
2. **PutImageData**: Using the `putImageData` method, which copies pixel data from one image data object to another.

**Test Cases:**

The benchmark consists of four test cases:

1. **DrawImage**: Draws the entire contents of a large image (500x500 pixels) on a smaller canvas (200x200 pixels).
2. **DrawImage (subrectangle)**: Similar to the first test case, but draws only a subrectangle of the larger image.
3. **PutImageData**: Copies pixel data from a large image (500x500 pixels) onto a smaller canvas (200x200 pixels), using an image data object created by `get imageData(0, 0, 500, 500)`.
4. **PutImageData (subrectangle)**: Similar to the third test case, but copies only a subrectangle of pixel data from the larger image.

**Library and Special Features:**

* The benchmark uses the HTML5 Canvas API, which provides a 2D drawing context for rendering images.
* No specific JavaScript libraries or frameworks are used beyond the standard library functions provided by the browser.

Now, let's discuss the pros and cons of each approach:

**DrawImage:**

Pros:

* Simple to implement
* Fast execution time

Cons:

* May not be as efficient as `putImageData` for very large images
* Can lead to aliasing issues if the target canvas is smaller than the source image

**PutImageData:**

Pros:

* Can be more efficient than `drawImage` for very large images
* Allows for precise control over the rendering process

Cons:

* More complex implementation compared to `drawImage`
* Requires manual handling of pixel data and image metadata

**Other Considerations:**

* The benchmark is likely designed to test the performance of both approaches on a range of devices and browsers.
* The use of subrectangle variants (DrawImage and PutImageData) helps to isolate the impact of image size on rendering performance.

**Alternatives:**

* Other canvas APIs, such as `drawImage` with alpha or blend modes, may be compared in alternative benchmarks.
* Different drawing libraries or frameworks, such as SVG or WebGL, could also be used to compare their performance on similar tasks.

Related benchmarks:

PutImageData vs DrawImage (big canvases) (version: 0)

Comparing performance of: DrawImage vs DrawImage (subrectangle) vs PutImageData vs PutImageData (subrectangle)

Created: 2 years ago by: Guest

Jump to the latest result

DrawImage

DrawImage (subrectangle)

PutImageData

PutImageData (subrectangle)

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