Benchmark: canvas2d.drawImage(imageElement) vs createImageBitmap(imageElement) (v3)

Script Preparation code:

var img = new Image();
var canvas = document.createElement('canvas');
var resCanvas = document.createElement('canvas');
var isReady = false;

var frameRaw1 = null;
var frameRaw2 = null;
var result = null;

img.addEventListener('load', function() {
    createImageBitmap(img).then(function(imageBitmap) {
      frameRaw2 = imageBitmap;
      canvas.width = frameRaw2.width;
      canvas.height = frameRaw2.height;
      frameRaw1 = canvas.getContext('2d');
      resCanvas.width = frameRaw2.width;
      resCanvas.height = frameRaw2.height;
      result = resCanvas.getContext('2d');
      isReady = true;
	});
});

img.src = 'https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/0025.jpg';

Tests:

canvas2d.drawImage(imageElement)
frameRaw1.clearRect(0, 0, canvas.width, canvas.height); frameRaw1.drawImage(img, 0, 0); result.drawImage(canvas, 0, 0);
createImageBitmap(imageElement)
createImageBitmap(img).then(function(r) { frameRaw2 = imageBitmap; result.drawImage(frameRaw2, 0, 0); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
canvas2d.drawImage(imageElement)
createImageBitmap(imageElement)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 98 on Windows

View result in a separate tab

Test name	Executions per second
canvas2d.drawImage(imageElement)	486.6 Ops/sec
createImageBitmap(imageElement)	22.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript benchmark test case for comparing two approaches: `canvas2d.drawImage` and `createImageBitmap`. The goal is to determine which method is more efficient when drawing an image on a canvas.

**Approaches Compared**

Two approaches are compared:

1. **canvas2d.drawImage**: This approach uses the 2D drawing context of a canvas element to draw the image.
2. **createImageBitmap**: This approach uses the `createImageBitmap` API to convert the image into a bitmap, which is then drawn on a new canvas.

**Pros and Cons of Each Approach**

**canvas2d.drawImage**

Pros:

* Fast rendering, as it leverages the GPU for drawing
* Less memory-intensive, as it only loads the image once

Cons:

* Can be slower for large images due to the overhead of rendering on the GPU
* May require more resources (e.g., CPU, GPU) compared to `createImageBitmap`

**createImageBitmap**

Pros:

* Can be faster for large images, as it allows for more efficient use of memory and processing power
* Reduces the need for repeated rendering on the GPU

Cons:

* More memory-intensive, as it requires loading the image twice (once as a bitmap and once as an image)
* Can be slower due to the additional processing steps required by `createImageBitmap`

**Library Used**

The library used in this benchmark is not explicitly stated. However, based on the code provided, it appears that the `createImageBitmap` API is being used, which is a part of the Web APIs specification.

**Special JS Feature/Syntax**

This benchmark does not use any special JavaScript features or syntax beyond what is required to implement the two approaches.

**Other Considerations**

When choosing between these approaches, consider the specific requirements of your project:

* For small images and simple graphics, `canvas2d.drawImage` may be sufficient.
* For large images or complex graphics, `createImageBitmap` may be a better choice for performance reasons.
* Keep in mind that both approaches can have varying degrees of performance depending on factors like hardware, browser versions, and image sizes.

**Alternatives**

If you need to compare other JavaScript rendering approaches or techniques, consider the following alternatives:

* WebGL: A low-level API for rendering 2D and 3D graphics.
* WebAssembly: A binary format that can be used to compile languages into efficient machine code.
* Three.js or Pixi.js: High-level libraries for creating interactive web applications with 3D graphics capabilities.

Keep in mind that each alternative has its own strengths, weaknesses, and use cases.

Related benchmarks:

canvas2d.drawImage(imageElement) vs createImageBitmap(imageElement) (v3) (version: 0)

Comparing performance of: canvas2d.drawImage(imageElement) vs createImageBitmap(imageElement)

Created: 3 years ago by: Guest

Jump to the latest result

canvas2d.drawImage(imageElement)

createImageBitmap(imageElement)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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