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>

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

​x
 
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);
di.drawImage(master,0,0);
PutImageData whole master into pid canvas
let imgData = masterctx.getImageData(0,0,100,100); pid.putImageData(imgData,0,0);
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);
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);
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);

 
​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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 5 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3.1 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
DrawImage whole master into di canvas	463711.9 Ops/sec
PutImageData whole master into pid canvas	3924.8 Ops/sec
DrawImage half master into di canvas	410366.0 Ops/sec
PutImageData half master into pid canvas	2416.3 Ops/sec
rect	1756976.5 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated 5 months ago):

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:

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

What options are compared?

The benchmark tests the following scenarios:

Drawing an entire image using drawImage().
Drawing half of an image using drawImage() (by specifying only part of the image coordinates).
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:

drawImage():
- Pros: Easy to use, efficient for large images or complex graphics.
- Cons: May be slower than putImageData() for small images or simple graphics.
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:

Canvas context: The drawImage() method uses the 2D canvas context (ctx), while putImageData() uses a separate ImageData object.
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:

Use drawImage() for large images or complex graphics.
Consider using WebGL for more complex graphics rendering (not shown in this benchmark).
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.

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