Benchmark: Canvas Image vs Image Bitmap

Script Preparation code:

var img = new Image();
var imageBitmap;
var doneLoading = false;
var canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
var canvas2 = document.createElement('canvas');
canvas2.width = 640;
canvas2.height = 480;

var ctx = canvas.getContext('2d');
var ctx2 = canvas2.getContext('2d');

img.addEventListener('load', function() {
  Promise.all([
    createImageBitmap(img)
  ]).then(function(images) {
  imageBitmap = images[0];
  doneLoading = true;
}, false);
});

if (doneLoading) {
  ctx.drawImage(img,0,0)
}

img.src = 'https://1.bp.blogspot.com/-52MtzD0GfX0/WvP52CL1WjI/AAAAAAAAOVw/_OpK4JHeWK01d-7IiZ6vzojYGhXqLRXrACLcBGAs/s1600/EMxediL.jpg';

Tests:

Canvas Image
if (doneLoading) ctx2.drawImage(canvas,0,0);
Image Bitmap
if (doneLoading) ctx2.drawImage(imageBitmap,0,0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Canvas Image
Image Bitmap

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 22 days ago)

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

Browser/OS: Chrome 149 on Windows

View result in a separate tab

Test name	Executions per second
Canvas Image	178369.1 Ops/sec
Image Bitmap	68624.0 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark compares two approaches to rendering images: using a Canvas element with a 2D drawing context (`ctx`) versus using an ImageBitmap API (`createImageBitmap`).

**Options Compared**

Two options are compared:

1. **Canvas Image**: This option uses the `ctx.drawImage()` method to draw the image on the canvas.
2. **Image Bitmap**: This option uses the `imageBitmap` returned by `createImageBitmap()` and passes it to `ctx2.drawImage()`.

**Pros and Cons of Each Approach**

* **Canvas Image**:
	+ Pros: Simple, widely supported, and well-established API.
	+ Cons: May not be as efficient for complex images or high-resolution images, as it requires additional memory allocation and garbage collection.
* **Image Bitmap**:
	+ Pros: More efficient than Canvas Image for large images, as it allows for direct access to the image data without the need for intermediate drawing operations. It also provides a more modern and optimized API for working with images.
	+ Cons: Requires support for the ImageBitmap API, which may not be available in older browsers or certain environments.

**Library/Technology Used**

* **ImageBitmap**: The `createImageBitmap()` function is part of the W3C specification for the Web APIs, which provides a modern and optimized way to work with images. It's supported by most modern browsers.

**Special JS Feature/Syntax**

The benchmark uses the `Promise.all()` method, which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). This method allows for parallel execution of multiple promises, making it useful for async operations like loading images.

**Other Considerations**

* The benchmark creates two canvas elements with identical dimensions to ensure consistent results.
* The `doneLoading` flag is used to synchronize the drawing operations on both canvases, ensuring that they are executed after the image has loaded.

**Alternatives**

If you want to replicate this benchmark or explore similar optimizations, consider using other libraries or APIs for working with images in JavaScript. Some alternatives include:

* **Canvas.js**: A library that provides optimized and high-performance rendering of images on canvas.
* **Pixi.js**: A 2D rendering engine that can be used to create complex graphics and animations.
* **WebGL**: A low-level API for rendering 3D graphics, which may be more suitable for high-performance applications.

Keep in mind that each alternative has its own strengths and weaknesses, and the choice of library or API will depend on your specific use case and requirements.

Related benchmarks:

Canvas Image vs Image Bitmap (version: 0)

Comparing performance of: Canvas Image vs Image Bitmap

Created: 2 years ago by: Guest

Jump to the latest result

Canvas Image

Image Bitmap

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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