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: 2 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 llama3.1:latest, generated 2 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the details of this benchmark.

**What is being tested?**

The benchmark compares three different methods for drawing an image onto another HTML canvas element:

1. `drawImage()` method, which draws an entire image or a region of an image onto a canvas.
2. `putImageData()` method, which puts an ImageData object (a pixel-by-pixel representation of an image) onto a canvas.
3. `fillRect()` method, which simply fills a rectangular area with a solid color.

**What options are compared?**

The benchmark tests the following scenarios:

1. Drawing an entire image using `drawImage()`.
2. Drawing half of an image using `drawImage()` (by specifying only part of the image coordinates).
3. Putting an ImageData object onto a canvas using `putImageData()`, which includes:
	* Putting an entire image onto a canvas.
	* Putting half of an image onto a canvas.

**Pros and Cons:**

1. **drawImage()**:
	* Pros: Easy to use, efficient for large images or complex graphics.
	* Cons: May be slower than `putImageData()` for small images or simple graphics.
2. **putImageData()**:
	* Pros: Can provide better performance for small images or simple graphics.
	* Cons: Requires creating an ImageData object, which can be slower for large images.

**Library and Special JS Feature/Syntax:**

None mentioned in this benchmark.

**Other Considerations:**

1. **Canvas context**: The `drawImage()` method uses the 2D canvas context (`ctx`), while `putImageData()` uses a separate ImageData object.
2. **Image processing**: If you need to perform image processing operations (e.g., resizing, rotating, or applying filters), using `drawImage()` with a canvas may be more efficient.

**Alternative approaches:**

If you need to draw images onto canvases frequently:

1. Use `drawImage()` for large images or complex graphics.
2. Consider using WebGL for more complex graphics rendering (not shown in this benchmark).
3. For simple graphics, use `fillRect()` or other basic canvas methods when possible.

Keep in mind that the best approach depends on your specific requirements and performance needs. This benchmark provides a good starting point to evaluate these options.

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 llama3.1:latest, generated 2 months ago):