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

Script Preparation code:

var img = new Image();
var canvas = document.createElement('canvas');
var isReady = false;

var frameRaw1 = null;
var frameRaw2 = null;

img.addEventListener('load', function() {
    createImageBitmap(img).then(function(imageBitmap) {
      frameRaw2 = imageBitmap;
      canvas.width = frameRaw2.width;
      canvas.height = frameRaw2.height;
      frameRaw1 = canvas.getContext('2d');
      isReady = true;
	});
});

img.src = 'https://media.discordapp.net/attachments/447410261289205781/574359442913492992/unknown.png';

Tests:

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

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
canvas2d.drawImage(imageElement)	0.0 Ops/sec
createImageBitmap(imageElement)	96672.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of what's being tested in this benchmark.

**Benchmark Purpose**

The purpose of this benchmark is to compare the performance of two approaches:

1. **Drawing an image on a 2D canvas using `canvas.getContext('2d').drawImage()`**
2. **Converting an image to a bitmap using `createImageBitmap()`**

These two approaches are compared because they have different use cases and may differ in terms of performance, memory usage, and complexity.

**Options Compared**

The benchmark compares the execution time of each approach:

1. **`canvas2d.drawImage(imageElement)`**: This option uses the 2D canvas API to draw the image. It involves creating a canvas element, setting its dimensions based on the image's size, and then drawing the image onto it using `drawImage()`.
2. **`createImageBitmap(imageElement)`**: This option uses the `createImageBitmap()` function to convert the image to a bitmap. The resulting bitmap can be used for various purposes, such as pixel manipulation or caching.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **`canvas2d.drawImage(imageElement)`**
	* Pros:
		+ Fast rendering of images.
		+ Low memory usage since it doesn't require converting the image to a bitmap.
	* Cons:
		+ May not be suitable for tasks that require pixel-level manipulation or caching.
		+ Can be slower if the canvas needs to be resized frequently.
2. **`createImageBitmap(imageElement)`**
	* Pros:
		+ Allows for pixel-level manipulation and caching.
		+ Can be faster when working with images that need to be manipulated at a low level (e.g., image editing).
	* Cons:
		+ Requires converting the image to a bitmap, which can increase memory usage.
		+ May be slower than `canvas2d.drawImage()` for simple rendering tasks.

**Library and Purpose**

The benchmark uses the following libraries:

1. **`createImageBitmap()`**: This function is part of the Web API, introduced in Chrome 78 (released in April 2019). It provides a way to convert an image into a bitmap that can be used for various purposes.
2. **`canvas.getContext('2d')`**: This method is also part of the Web API and allows accessing the 2D drawing context of a canvas element.

**Special JS Features or Syntax**

This benchmark uses the following special JavaScript features:

1. **`async/await`**: Used to handle the promise returned by `createImageBitmap()`.
2. **`try-catch` blocks**: Not used explicitly, but it's implied that the benchmark should catch any errors that might occur during execution.

**Alternatives**

If you're interested in exploring alternative approaches or want to see how this benchmark performs on other browsers or devices, here are a few options:

1. **Benchmark using `Web Workers`**: You could use Web Workers to run the benchmarks concurrently and compare the performance of each approach in a multi-threaded environment.
2. **Benchmark using a different image size or quality**: Experimenting with images of varying sizes or qualities can help you understand how the benchmark's results might change under different conditions.
3. **Use a different browser or device**: Running the benchmark on different browsers or devices can provide insights into how the performance of each approach varies across platforms.
4. **Compare with other image processing APIs**: You could compare `canvas2d.drawImage()` and `createImageBitmap()` with other image processing APIs, such as WebGL or Pixi.js, to see which one performs best for specific use cases.

Keep in mind that these alternatives might require additional setup and testing, but they can provide valuable insights into the performance characteristics of each approach.

Related benchmarks:

canvas2d.drawImage(imageElement) vs createImageBitmap(imageElement) (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 5 months ago):