Benchmark: Canvas context2d: Image vs ImageBitmap vs Canvas (with clear canvas)

Script Preparation code:

var img = new Image();
var imageBitmap;
var doneLoading = false;
var canvasImage = document.createElement('canvas');
canvasImage.width = 700;
canvasImage.height = 700;
var canvasImageBitmap = document.createElement('canvas');
canvasImageBitmap.width = 700;
canvasImageBitmap.height = 700;
var canvas = document.createElement('canvas');
canvas.width = 700;
canvas.height = 700;
var canvasCanvas = document.createElement('canvas');
canvasCanvas.width = 700;
canvasCanvas.height = 700;

var ctxImage = canvasImage.getContext('2d', { alpha: false });
var ctxImageBitmap = canvasImageBitmap.getContext('2d', { alpha: false });
var ctx = canvas.getContext('2d', {	alpha: false });
var ctxCanvas = canvasCanvas.getContext('2d', {	alpha: false });

async function globalMeasureThatScriptPrepareFunction() {
  return new Promise((resolve, reject) => {
    img.addEventListener('load', function() {
        createImageBitmap(img)
      .then(function(bitmap) {
        imageBitmap = bitmap;
        debugger;
        doneLoading = true;
        console.log("bitmap preparation done");
        resolve(true);
      }, false);
      
      ctx.drawImage(img, 0, 0);
      console.log("canvas preparation done");
    });

    img.src = 'https://1.bp.blogspot.com/-52MtzD0GfX0/WvP52CL1WjI/AAAAAAAAOVw/_OpK4JHeWK01d-7IiZ6vzojYGhXqLRXrACLcBGAs/s1600/EMxediL.jpg';
  });
}

Tests:

Image
ctxImage.drawImage(img,0,0); ctxImage.clearRect(0,0,700,700);
ImageBitmap
ctxImageBitmap.drawImage(imageBitmap,0,0); ctxImageBitmap.clearRect(0,0,700,700);
Canvas
ctxCanvas.drawImage(canvas,0,0); ctxCanvas.clearRect(0,0,700,700);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Image
ImageBitmap
Canvas

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
Image	959459.8 Ops/sec
ImageBitmap	836179.8 Ops/sec
Canvas	898583.6 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 13 days ago):

LLMs can make mistakes. Check important info.

The benchmark titled **"Canvas context2d: Image vs ImageBitmap vs Canvas (with clear canvas)"** is designed to evaluate the performance of different approaches to drawing images in an HTML `<canvas>` element using the 2D rendering context. Specifically, it tests three methods for rendering: using a standard image (`Image`), an `ImageBitmap`, and another canvas (`Canvas`). Each of these methods has its own strengths and weaknesses, which will be covered below.

### Options Compared

1. **Image (`ctxImage.drawImage(img, 0, 0);`)**:
   - This method utilizes a standard HTML `Image` object to draw an image onto the canvas.
   - **Pros**:
     - Simple and straightforward to use.
     - Well-supported across all modern browsers.
   - **Cons**:
     - The image must be fully loaded before it can be drawn, which can lead to a delay in rendering if not managed correctly.

2. **ImageBitmap (`ctxImageBitmap.drawImage(imageBitmap, 0, 0);`)**:
   - This approach uses `ImageBitmap`, a more efficient representation of image data optimized for drawing.
   - The `createImageBitmap()` function converts an `Image` into an `ImageBitmap`, allowing for quicker rendering.
   - **Pros**:
     - Improved performance in rendering, particularly beneficial for repeated drawings (like in animations).
     - Prepared in memory, which reduces delays in rendering times compared to standard image draws.
   - **Cons**:
     - Slightly more complex because it requires the creation of the `ImageBitmap` which involves an asynchronous operation.

3. **Canvas (`ctxCanvas.drawImage(canvas, 0, 0);`)**:
   - This method uses an existing canvas as the source of the image to be drawn onto another canvas.
   - **Pros**:
     - Useful for scenarios where you are compositing multiple canvas graphics together.
   - **Cons**:
     - If not managed effectively, can become resource-intensive, especially if many canvases are being drawn to each other.
     - Performance may not be as optimal as using `ImageBitmap`.

### Considerations

- **Performance**: The benchmark results show that the method using the `Image` approach results in the highest average executions per second (959,459.75), followed closely by the `Canvas` approach (898,583.5625), and finally the `ImageBitmap` approach at (836,179.75). This indicates that while the `ImageBitmap` method is efficient for certain use cases, it may not always be the fastest for simple static images.
  
- **Use Cases**: Choosing the appropriate method does depend on the specific scenario:
  - For static image loading, using a standard `Image` may still be the best option.
  - For animations or scenarios with frequent image redraws, `ImageBitmap` might provide better performance.
  - If you are layering multiple canvases, using an existing canvas could also be beneficial.

### Alternatives

In addition to these methods, alternative approaches include:

- **WebGL**: For advanced rendering, especially for graphics-intensive applications like games, using WebGL might provide better performance and capabilities.
- **SVG (Scalable Vector Graphics)**: For vector images and graphics, SVG might be a better alternative as it scales without losing quality and can handle complex shapes and paths.
- **OffscreenCanvas**: This API allows for rendering in a background thread, which can improve performance for web applications by freeing up the main thread.

In summary, this benchmark highlights important performance considerations when using different methods for rendering images in `<canvas>` elements, providing insights into which method may be best suited depending on the requirements of the application.

Related benchmarks:

Canvas context2d: Image vs ImageBitmap vs Canvas (with clear canvas) (version: 1)

Comparing performance of: Image vs ImageBitmap vs Canvas

Created: 13 days ago by: Guest

Jump to the latest result

Image

ImageBitmap

Canvas

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 13 days ago):