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

Historical Performance Data aggregated from 92 community runs

Desktop Results:

Chrome 54 runs

rect

720K/s

DrawImage whole master into di canvas

564K/s

DrawImage half master into di canvas

328K/s

PutImageData half master into pid canvas

21K/s

PutImageData whole master into pid canvas

19K/s

Fastest: rect (37.6x faster)

View exact numbers

✓ rect: 720,433 ops/sec
• DrawImage whole master into di canvas: 563,582 ops/sec
• DrawImage half master into di canvas: 327,783 ops/sec
• PutImageData half master into pid canvas: 21,187 ops/sec
• PutImageData whole master into pid canvas: 19,170 ops/sec

Firefox 33 runs

rect

764K/s

DrawImage whole master into di canvas

400K/s

DrawImage half master into di canvas

211K/s

PutImageData half master into pid canvas

27K/s

PutImageData whole master into pid canvas

23K/s

Fastest: rect (33.5x faster)

View exact numbers

✓ rect: 763,512 ops/sec
• DrawImage whole master into di canvas: 400,194 ops/sec
• DrawImage half master into di canvas: 210,828 ops/sec
• PutImageData half master into pid canvas: 26,779 ops/sec
• PutImageData whole master into pid canvas: 22,813 ops/sec

Other 5 runs

rect

554K/s

DrawImage whole master into di canvas

315K/s

DrawImage half master into di canvas

170K/s

PutImageData half master into pid canvas

15K/s

PutImageData whole master into pid canvas

13K/s

Fastest: rect (43.2x faster)

View exact numbers

✓ rect: 553,899 ops/sec
• DrawImage whole master into di canvas: 314,535 ops/sec
• DrawImage half master into di canvas: 169,637 ops/sec
• PutImageData half master into pid canvas: 15,450 ops/sec
• PutImageData whole master into pid canvas: 12,821 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 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: one month ago)

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

Browser/OS: Firefox 151 on Windows

View result in a separate tab

rect

455K/s

DrawImage whole master into di canvas

165K/s

DrawImage half master into di canvas

72K/s

PutImageData half master into pid canvas

20K/s

PutImageData whole master into pid canvas

15K/s

View exact numbers

Test name	Executions per second
✓ rect	455,405 Ops/sec
DrawImage whole master into di canvas	165,364 Ops/sec
DrawImage half master into di canvas	71,621 Ops/sec
PutImageData half master into pid canvas	19,997 Ops/sec
PutImageData whole master into pid canvas	15,187 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated one year 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.

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: 4 years ago by: Guest

Go 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

Historical Performance Data aggregated from 92 community runs

Desktop Results:

Chrome 54 runs

Firefox 33 runs

Other 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

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: 4 years ago by: Guest

Go 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

Historical Performance Data aggregated from 92 community runs

Desktop Results:

Chrome 54 runs

Firefox 33 runs

Other 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

Related benchmarks

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`