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

Script Preparation code:

var img = new Image();
var canvas = document.createElement('canvas');
var resCanvas = document.createElement('canvas');
var isReady = false;

var frameRaw1 = null;
      frameRaw1 = canvas.getContext('2d');
var frameRaw2 = null;
var result = null;
      result = resCanvas.getContext('2d');

img.addEventListener('load', function() {
    createImageBitmap(img).then(function(imageBitmap) {
      frameRaw2 = imageBitmap;
      canvas.width = frameRaw2.width;
      canvas.height = frameRaw2.height;
      resCanvas.width = frameRaw2.width;
      resCanvas.height = frameRaw2.height;
      isReady = true;
	});
});

img.src = 'https://fastly.picsum.photos/id/159/536/354.jpg?hmac=59u2RZ-L-Vjfrvsa9T21nZU7ylv03-EGGKErZCaf488';

​x
 
var img = new Image();var canvas = document.createElement('canvas');var resCanvas = document.createElement('canvas');var isReady = false;​var frameRaw1 = null;      frameRaw1 = canvas.getContext('2d');var frameRaw2 = null;var result = null;      result = resCanvas.getContext('2d');​img.addEventListener('load', function() {    createImageBitmap(img).then(function(imageBitmap) {      frameRaw2 = imageBitmap;      canvas.width = frameRaw2.width;      canvas.height = frameRaw2.height;      resCanvas.width = frameRaw2.width;      resCanvas.height = frameRaw2.height;      isReady = true;    });});​img.src = 'https://fastly.picsum.photos/id/159/536/354.jpg?hmac=59u2RZ-L-Vjfrvsa9T21nZU7ylv03-EGGKErZCaf488';

Tests:

canvas2d.drawImage(imageElement)
frameRaw1.clearRect(0, 0, canvas.width, canvas.height); frameRaw1.drawImage(img, 0, 0); result.drawImage(canvas, 0, 0);
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); });
createImageBitmap(img).then(function(r) {
frameRaw2 = imageBitmap;
result.drawImage(frameRaw2, 0, 0);
});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Android 10; Mobile; rv:109.0) Gecko/113.0 Firefox/113.0

Browser/OS: Firefox Mobile 113 on Android

View result in a separate tab

Test name	Executions per second
canvas2d.drawImage(imageElement)	23966.4 Ops/sec
createImageBitmap(imageElement)	28878.2 Ops/sec

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

Let's break down the provided JSON and explain what's being tested.

Overview The benchmark compares two approaches to drawing an image on a canvas: canvas2d.drawImage() and createImageBitmap(imageElement). The goal is to determine which approach is faster for mobile devices.

Options Compared

canvas2d.drawImage(): This method draws the image directly onto the canvas using the 2D context. It's a straightforward way to display an image on a canvas.
- Pros: Easy to implement, widely supported.
- Cons: Can be slower due to the need for rendering and compositing.
createImageBitmap(imageElement): This method creates a bitmap representation of the image element using the createImageBitmap() API. The resulting bitmap can then be drawn onto another canvas or used as an image source.
- Pros: Can be faster, as it avoids the need for rendering and compositing, but requires more memory and processing power.
- Cons: More complex to implement, may not work on all browsers.

Other Considerations

Memory usage: createImageBitmap() uses more memory than canvas2d.drawImage(), which can be a concern for mobile devices with limited resources.
Browser support: While both methods are widely supported, there might be some browser-specific issues or limitations to consider.

Library and Special JS Features

The benchmark doesn't explicitly use any libraries, but it relies on the following built-in JavaScript features:

Canvas API (canvas2d)
Image API (createImageBitmap, img.src)
HTML5 APIs (e.g., getBoundingClientRect())

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

Alternatives

If you wanted to explore alternative approaches, you could consider the following:

WebGL: Instead of using the 2D canvas API, you could use WebGL to draw the image directly onto the GPU.
WebAssembly: You could compile your JavaScript code into WebAssembly (WASM) and run it in a WASM runtime, potentially achieving better performance on mobile devices.
Native plugins or modules: Depending on the specific requirements of your project, you might consider using native plugins or modules to optimize image rendering and processing.

Keep in mind that these alternatives would likely require significant changes to your codebase and might not be feasible for all use cases.

I hope this explanation helps! Let me know if you have any further questions.

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what's being tested.

**Overview**
The benchmark compares two approaches to drawing an image on a canvas: `canvas2d.drawImage()` and `createImageBitmap(imageElement)`. The goal is to determine which approach is faster for mobile devices.

**Options Compared**

1. **`canvas2d.drawImage()`**: This method draws the image directly onto the canvas using the 2D context. It's a straightforward way to display an image on a canvas.
	* Pros: Easy to implement, widely supported.
	* Cons: Can be slower due to the need for rendering and compositing.
2. **`createImageBitmap(imageElement)`**: This method creates a bitmap representation of the image element using the `createImageBitmap()` API. The resulting bitmap can then be drawn onto another canvas or used as an image source.
	* Pros: Can be faster, as it avoids the need for rendering and compositing, but requires more memory and processing power.
	* Cons: More complex to implement, may not work on all browsers.

**Other Considerations**

* **Memory usage**: `createImageBitmap()` uses more memory than `canvas2d.drawImage()`, which can be a concern for mobile devices with limited resources.
* **Browser support**: While both methods are widely supported, there might be some browser-specific issues or limitations to consider.

**Library and Special JS Features**

The benchmark doesn't explicitly use any libraries, but it relies on the following built-in JavaScript features:

* `Canvas` API (`canvas2d`)
* `Image` API (`createImageBitmap`, `img.src`)
* `HTML5 APIs` (e.g., `getBoundingClientRect()`)

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

**Alternatives**

If you wanted to explore alternative approaches, you could consider the following:

1. **` WebGL `**: Instead of using the 2D canvas API, you could use WebGL to draw the image directly onto the GPU.
2. **`WebAssembly`**: You could compile your JavaScript code into WebAssembly (WASM) and run it in a WASM runtime, potentially achieving better performance on mobile devices.
3. **Native plugins or modules**: Depending on the specific requirements of your project, you might consider using native plugins or modules to optimize image rendering and processing.

Keep in mind that these alternatives would likely require significant changes to your codebase and might not be feasible for all use cases.

I hope this explanation helps! Let me know if you have any further questions.

Related benchmarks:

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

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

Created: 2 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):