Benchmark: PutImageData vs DrawImage vs fillRect

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>
<canvas id='rect' 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');
var rect = document.getElementById('rect').getContext('2d');

masterctx.fillRect(0,0,50,50);
masterctx.fillStyle = "red";
masterctx.fillRect(50,50,100,100);

Tests:

DrawImage whole master into di canvas
di.drawImage(master,0,0);
PutImageData whole master into pid canvas
let imgData = masterctx.getImageData(0,0,100,100); pid.putImageData(imgData,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
let imgData = masterctx.getImageData(25,0,75,100); pid.putImageData(imgData,25,0);
rect
rect.fillRect(0,0,50,50); rect.fillStyle = "red"; rect.fillRect(50,50,100,100);

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
rect

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 133 on Linux

View result in a separate tab

Test name	Executions per second
DrawImage whole master into di canvas	110260.6 Ops/sec
PutImageData whole master into pid canvas	16782.5 Ops/sec
DrawImage half master into di canvas	68496.6 Ops/sec
PutImageData half master into pid canvas	18900.8 Ops/sec
rect	407620.2 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):

LLMs can make mistakes. Check important info.

This benchmark compares different ways to transfer image data between canvases in JavaScript.  Let's break down the options:

**1. `drawImage`:** This method directly copies an entire canvas (`master`) onto another canvas (`di`).  Think of it like taking a photo and pasting it onto a new surface.

* **Pros:** Simple, straightforward to implement.
   * **Cons:** Can be less efficient if you only need a portion of the original image.

**2. `getImageData` and `putImageData`:** This approach extracts the pixel data from one canvas (`masterctx`) using `getImageData`, then uses `putImageData` to paste that data onto another canvas (`pid`).  Imagine copying pixels individually like moving Lego bricks.

* **Pros:** More precise control over which image data is copied. You can selectively transfer portions of the original image.
   * **Cons:** Can be more complex and slower than `drawImage` if you're transferring the entire image.

**3. `fillRect`:** This method simply fills a rectangular area with a given color (`rect`).  It's not directly copying an image but creating it from scratch.

* **Pros:**  The most performant option if you just need to draw filled rectangles.
    * **Cons:** Not suitable for transferring complex images or portions of existing ones.

**Alternatives:**

*   **Canvas APIs:** There are other Canvas API methods like `getContext('2d').lineTo()` and `getContext('2d').bezierCurveTo()`, which could be used to draw shapes instead of copying entire images, offering more control and potentially better performance depending on the desired outcome.
* **Image Manipulation Libraries:** For more complex image manipulations, libraries like Fabric.js or PixiJS provide higher-level abstractions and optimizations.

**Considerations for Choosing a Method:**

*   **Performance:**  `fillRect` is generally the fastest, followed by `drawImage`.  `getImageData/putImageData` can be slower, especially for larger images.
*   **Complexity:** `drawImage` is the simplest to use, while `getImageData/putImageData` adds more complexity.
*   **Image Size:** For small images, the performance difference might not be noticeable. However, for large images, choosing a more efficient method becomes crucial.

Remember that benchmark results can vary based on browser, hardware, and other factors.

Related benchmarks:

PutImageData vs DrawImage vs fillRect (version: 0)

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 vs rect

Created: 2 years 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

rect

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):