Benchmark: FIXED! GetImageData with PutImageData vs just DrawImage

HTML Preparation code:

master
<canvas id='master' width='100' height='100'></canvas>
<canvas id='pid' width='100' height='100'></canvas>pid1
<canvas id='di' width='100' height='100'></canvas>di1
<canvas id='pid2' width='100' height='100'></canvas>pid2
<canvas id='di2' width='100' height='100'></canvas>di2

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 pid2 = document.getElementById('pid2').getContext('2d');
var di2 = document.getElementById('di2').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 di2 canvas
di2.drawImage(master,25,0,50,100,25,0,50,100);
PutImageData half master into pid2 canvas
let imgDatas = masterctx.getImageData(25,0,50,100); pid2.putImageData(imgDatas,25,0);

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 di2 canvas
PutImageData half master into pid2 canvas

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 months ago)

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

Browser/OS: Firefox 139 on Linux

View result in a separate tab

Test name	Executions per second
DrawImage whole master into di canvas	287294.6 Ops/sec
PutImageData whole master into pid canvas	24013.4 Ops/sec
DrawImage half master into di2 canvas	99779.6 Ops/sec
PutImageData half master into pid2 canvas	46555.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the Benchmark Definition and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark is designed to compare two approaches for rendering an image on a web page:

1. **DrawingImage**: The original approach of drawing the entire master image onto another canvas using `di.drawImage(master, 0, 0)`.
2. **PutImageData**: Using `getImageData` to extract pixel data from the master image and then applying it to another canvas using `putImageData`.

**Comparison Points**

The benchmark compares four individual test cases:

1. **DrawImage whole master into di canvas**: Drawing the entire master image onto `di` using `di.drawImage(master, 0, 0)`.
2. **PutImageData whole master into pid canvas**: Extracting pixel data from the master image and applying it to `pid` using `putImageData`.
3. **DrawImage half master into di2 canvas**: Drawing a portion of the master image (25x50 pixels) onto `di2` using `di2.drawImage(master, 25, 0, 50, 100, 25, 0, 50, 100)`.
4. **PutImageData half master into pid2 canvas**: Extracting pixel data from a portion of the master image (25x50 pixels) and applying it to `pid2` using `putImageData`.

**Pros and Cons**

Here's a brief overview of each approach:

1. **DrawImage**:
	* Pros: Simple, straightforward, and well-supported by most browsers.
	* Cons: Can be slow for large images or complex renderings, as it involves multiple canvas copies and transformations.
2. **PutImageData**:
	* Pros: Can be faster than DrawImage for large images or complex renderings, as it only requires a single canvas copy and pixel data manipulation.
	* Cons: Requires more CPU resources to extract and manipulate pixel data, which can impact performance.

In general, PutImageData is often preferred when rendering large images or performing complex transformations, while DrawImage is suitable for simpler use cases.

**Libraries and Special Features**

There are no notable libraries mentioned in the benchmark definition. However, the use of `getContext('2d')` suggests that it's utilizing the 2D drawing context API, which is a standard feature in most modern browsers.

No special JavaScript features or syntax are mentioned in this benchmark.

Related benchmarks:

FIXED! GetImageData with PutImageData vs just DrawImage (version: 0)

v2

Comparing performance of: DrawImage whole master into di canvas vs PutImageData whole master into pid canvas vs DrawImage half master into di2 canvas vs PutImageData half master into pid2 canvas

Created: 5 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 di2 canvas

PutImageData half master into pid2 canvas

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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