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);

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Chrome 14 runs

Canvas Image

652K/s

Image Bitmap

190K/s

Fastest: Canvas Image (3.4x faster)

View exact numbers

✓ Canvas Image: 652,078 ops/sec
• Image Bitmap: 189,582 ops/sec

Firefox 8 runs

Canvas Image

506K/s

Image Bitmap

455K/s

Fastest: Canvas Image (1.1x faster)

View exact numbers

✓ Canvas Image: 506,075 ops/sec
• Image Bitmap: 454,566 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 3 months 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

Canvas Image

178K/s

Image Bitmap

69K/s

View exact numbers

Test name	Executions per second
✓ Canvas Image	178,369 Ops/sec
Image Bitmap	68,624 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.

Canvas Image vs Image Bitmap (version: 0)

Comparing performance of: `Canvas Image vs Image Bitmap`

Created: 3 years ago by: Guest

Go to the latest result

Canvas Image

Image Bitmap

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Chrome 14 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Canvas Image vs Image Bitmap (version: 0)

Comparing performance of: Canvas Image vs Image Bitmap

Created: 3 years ago by: Guest

Go to the latest result

Canvas Image

Image Bitmap

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Chrome 14 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Canvas Image vs Image Bitmap`