Benchmark: putImageData vs drawImage methods

HTML Preparation code:

<canvas id="image" width="300" height="300"></canvas>
<canvas id="canvas" width="300" height="300"></canvas>

Script Preparation code:

var imgCanvas = document.getElementById("image");
var imgCtx = imgCanvas.getContext("2d");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

imgCtx.fillStyle = "red";
imgCtx.fillRect(0, 0, 300, 300);

Tests:

Image data
context.putImageData(imgCtx.getImageData(0, 0, 300, 300), 0, 0);
Draw Image
context.drawImage(imgCanvas, 0, 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Image data
Draw Image

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.74 Safari/537.36

Browser/OS: Chrome 95 on Linux

View result in a separate tab

Test name	Executions per second
Image data	82.4 Ops/sec
Draw Image	17407.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Purpose:**
The main goal of this benchmark is to compare the performance of two methods for rendering images in JavaScript:

1. `context.putImageData()`: This method takes the image data from a canvas element and applies it to another canvas element at a specific position.
2. `context.drawImage()`: This method draws an image from a source canvas element onto a target canvas element.

**Options Compared:**
The benchmark compares the performance of these two methods on two different cases:

1. **Image data**: The benchmark measures the time it takes to process and apply the entire 300x300 pixel image using `context.putImageData()`.
2. **Draw Image**: The benchmark measures the time it takes to draw the same 300x300 pixel image from a source canvas element onto a target canvas element using `context.drawImage()`.

**Pros and Cons of Each Approach:**

1. `context.putImageData()`:
	* Pros:
		+ Can be more efficient for certain use cases, such as when working with large images or performing complex transformations.
		+ Allows for precise control over the image data.
	* Cons:
		+ May be slower for simple drawing operations due to the overhead of processing and applying image data.
2. `context.drawImage()`:
	* Pros:
		+ Typically faster than `putImageData()` for simple drawing operations.
		+ More straightforward and easier to implement, as it leverages a built-in API.
	* Cons:
		+ May be less efficient for certain use cases, such as when working with large images or performing complex transformations.

**Library Used:**
None is explicitly mentioned in the benchmark definition. However, both methods rely on the 2D drawing context provided by the HTML canvas element, which is a part of the Web API.

**Special JS Feature/Syntax:**
There are no special JavaScript features or syntax used in this benchmark. The code is straightforward and relies on standard JavaScript APIs.

**Other Alternatives:**

1. `context.drawImage()` with image caching: Some browsers support image caching, where images can be stored in memory for faster drawing operations. This approach might offer better performance for repeated draws of the same image.
2. Using a graphics library: Libraries like SVG.js or Konva.js provide additional features and optimizations for 2D graphics rendering, which could potentially improve performance in certain scenarios.

Keep in mind that the choice of method depends on the specific use case, performance requirements, and personal preference. The benchmark provides valuable insights into the relative performance of these two methods, helping developers make informed decisions about their code.

Related benchmarks:

putImageData vs drawImage methods (version: 0)

Testing performance

Comparing performance of: Image data vs Draw Image

Created: one year ago by: Guest

Jump to the latest result

Image data

Draw Image

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):