Benchmark: Image vs canvas with 2d

Script Preparation code:

var img = new Image();
var imageBitmap;
var doneLoading = false;

let canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;

let canvas2 = document.createElement('canvas');
canvas2.width = 640;
canvas2.height = 480;

let canvas3 = document.createElement('canvas');
canvas3.width = 640;
canvas3.height = 480;

var ctx = canvas.getContext('2d');
var ctx2 = canvas2.getContext('2d');
var ctx3 = canvas2.getContext('2d');

var cv = document.createElement('canvas');
cv.width = 700;
cv.height = 700;
var cvx = cv.getContext('2d');

img.addEventListener('load', function() {
  
  cvx.drawImage(img,0,0);
    
});

img.src = 'https://1.bp.blogspot.com/-52MtzD0GfX0/WvP52CL1WjI/AAAAAAAAOVw/_OpK4JHeWK01d-7IiZ6vzojYGhXqLRXrACLcBGAs/s1600/EMxediL.jpg';

Tests:

Image
if (doneLoading) ctx.drawImage(img,0,0);
Image CV
if (doneLoading) ctx3.drawImage(cv,0,0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Image
Image CV

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
Image	128344312.0 Ops/sec
Image CV	122878432.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of two approaches: drawing an image directly to a canvas element (Raw Image) and using the `ImageBitmap` API with the same image, compared to another approach that uses a separate canvas element (`cv`) to draw the image.

**Options Compared**

1. **Raw Image**: This approach draws the image directly onto the canvas element.
	* Pros:
		+ Simple and straightforward implementation
		+ Fast, as no additional processing is required
	* Cons:
		+ May involve more frequent DOM mutations, potentially affecting performance
2. **ImageBitmap**: This approach uses the `ImageBitmap` API to create a bitmap representation of the image, which can then be drawn onto another canvas element.
	* Pros:
		+ Can reduce the number of DOM mutations and improve performance
		+ May allow for more efficient use of GPU resources
3. **Image CV (Canvas)**: This approach uses a separate canvas element (`cv`) to draw the image, similar to the `ImageBitmap` approach.
	* Pros:
		+ Similar benefits as ImageBitmap, with reduced DOM mutations and potentially improved performance
4. **Other alternatives**: The benchmark doesn't explicitly compare these approaches, but other options might include using WebGL, WebGPU, or other low-level graphics APIs.

**Library Usage**

The `ImageBitmap` API is used in both the Raw Image and Image CV approaches. This library provides a way to create a bitmap representation of an image, which can then be manipulated and drawn onto another canvas element.

**Special JS Features/Syntax**

None mentioned in this specific benchmark.

**Benchmark Preparation Code Analysis**

The provided script preparation code creates multiple canvas elements and assigns them context objects (`ctx`, `ctx2`, `ctx3`, `cvx`). It also sets up an image loading event listener that draws the image onto each of these canvases when it loads. The benchmark only tests two scenarios:

* Drawing the image directly onto a canvas element (Raw Image)
* Using `ImageBitmap` to create a bitmap representation of the image and drawing it onto another canvas element (Image CV)

**Other Considerations**

When implementing this benchmark, consider the following factors:

* **DOM mutations**: Frequent DOM mutations can impact performance. The Raw Image approach may involve more frequent mutations than the other two approaches.
* **GPU acceleration**: Modern browsers support various GPU-accelerated graphics APIs, such as WebGL or WebGPU. Using these APIs might further improve performance for complex graphics workloads.
* **Canvas element size and position**: The size and position of the canvas elements can affect rendering performance. Make sure to use optimized canvas sizes and positions in your benchmark.

**Alternative Benchmarks**

If you're looking to explore other approaches, consider benchmarks that focus on:

* WebGL or WebGPU-based rendering
* GPU-accelerated graphics workloads (e.g., 3D rendering, physics simulations)
* Other low-level graphics APIs, such as SVG or CSS transforms

Related benchmarks:

Image vs canvas with 2d (version: 0)

Testing draw calls using a raw Image versus an ImageBitmap vs canvas

Comparing performance of: Image vs Image CV

Created: 4 years ago by: Guest

Jump to the latest result

Image

Image CV

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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