Benchmark: PutImageData vs DrawImage v2

HTML Preparation code:

<canvas id='master' width='100' height='100'></canvas>
<canvas id='pid' width='100' height='100'></canvas>
<canvas id='di' width='100' height='100'></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);

let imgData1 = masterctx.getImageData(0,0,100,100);
let imgData2 = masterctx.getImageData(25,0,75,100);

Tests:

DrawImage whole master into di canvas
di.drawImage(master,0,0);
PutImageData whole master into pid canvas
pid.putImageData(imgData1,0,0);
DrawImage half master into di canvas
di.drawImage(master,25,0,50,100,25,0,50,100);
PutImageData half master into pid canvas
pid.putImageData(imgData2,25,0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DrawImage whole master into di canvas
PutImageData whole master into pid canvas
DrawImage half master into di canvas
PutImageData half master into pid canvas

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Ubuntu

View result in a separate tab

Test name	Executions per second
DrawImage whole master into di canvas	628741.0 Ops/sec
PutImageData whole master into pid canvas	278317.7 Ops/sec
DrawImage half master into di canvas	213954.4 Ops/sec
PutImageData half master into pid canvas	352444.4 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark tests the performance of two different methods for rendering images onto a canvas in HTML5: `drawImage` and `putImageData`. These methods differ in how they handle the image data being drawn, and the benchmark compares their performance when working with a base image drawn on a master canvas.

### Benchmark Comparison

1. **DrawImage Method**:
   - **Test Cases**:
     - "DrawImage whole master into di canvas"
       - **Definition**: `di.drawImage(master, 0, 0);`
     - "DrawImage half master into di canvas"
       - **Definition**: `di.drawImage(master, 25, 0, 50, 100, 25, 0, 50, 100);`
     
   - **Description**: The `drawImage` function is a more straightforward method to copy an image or a part of an image from one canvas to another. In this benchmark, it tests both the full image from the master canvas and a subsection of the image.
   - **Pros**:
     - Simplicity in usage—just a single call.
     - Handles scaling and cropping inherently based on parameters.
     - Can be faster for direct copying of images.
   - **Cons**:
     - More overhead involved if you are extracting and manipulating pixel data extensively.
  
2. **PutImageData Method**:
   - **Test Cases**:
     - "PutImageData whole master into pid canvas"
       - **Definition**: `pid.putImageData(imgData1, 0, 0);`
     - "PutImageData half master into pid canvas"
       - **Definition**: `pid.putImageData(imgData2, 25, 0);`
     
   - **Description**: `putImageData` is used to draw a rectangular area of pixel data onto the canvas. In this benchmark, it takes extracted pixel image data from the master canvas and puts it into a second canvas.
   - **Pros**:
     - Provides more control over individual pixel manipulation if needed.
     - Allows drawing image data that may have been altered after extraction.
   - **Cons**:
     - Generally slower than `drawImage` for straightforward image copying tasks due to additional overhead of handling pixel data directly.
     - More complex to use if only copying images.

### Performance Results Overview

The benchmark results reveal the executions per second for each of the test cases performed in Chrome 133 on a Windows Desktop environment:

- The fastest test case is drawing a half image using `drawImage`, resulting in approximately **603,849 executions per second**.
- The second-best performing action is drawing the whole image using `drawImage`, achieving **590,539 executions per second**.
- Both `putImageData` calls (both full and half images) performed significantly slower, with the fastest being around **57,760 executions per second** for the half image and only **53,754 for the full image**.

### Other Considerations and Alternatives

When deciding between `drawImage` and `putImageData`, developers may also consider the following:
- **Use Cases**: If direct and straightforward image copying is needed, `drawImage` is typically preferred. However, if there's a requirement for direct pixel manipulation or performance enhancements through preprocessing of pixel data, `putImageData` is a better choice.
- **Browser Support**: Both methods are widely supported across modern browsers.

### Summary

In summary, this benchmark explores the performance trade-offs between using `drawImage`, which is generally faster and easier for copying images, and `putImageData`, which offers more granular control over pixel manipulation but comes with a performance penalty. Depending on the specific requirements of a project, developers can choose the most suitable approach based on these performance characteristics and their specific use case.

Related benchmarks:

PutImageData vs DrawImage v2 (version: 1)

GetImageData with PutImageData vs just DrawImage

Comparing performance of: DrawImage whole master into di canvas vs PutImageData whole master into pid canvas vs DrawImage half master into di canvas vs PutImageData half master into pid canvas

Created: one year ago by: Guest

Jump to the latest result

DrawImage whole master into di canvas

PutImageData whole master into pid canvas

DrawImage half master into di canvas

PutImageData half master into pid canvas

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):