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

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');
var ctxImageBitmap = canvasImageBitmap.getContext('2d');
var ctx = canvas.getContext('2d');
var ctxCanvas = canvasCanvas.getContext('2d');

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; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Windows

View result in a separate tab

Test name	Executions per second
Image	257576.2 Ops/sec
ImageBitmap	247192.0 Ops/sec
Canvas	252611.8 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark you've provided measures the performance of rendering images in a 2D canvas context using three different approaches: the standard HTML `Image`, `ImageBitmap`, and another canvas element as the source.

### Test Cases Overview

1. **Image Rendering**:
   - **Test Name**: "Image"
   - **Benchmark Definition**: `ctxImage.drawImage(img,0,0); ctxImage.clearRect(0,0,700,700);`
   - **Description**: This approach utilizes a standard HTML `Image` object to draw the image onto the canvas. The `drawImage` method is called to render the image, followed by clearing the canvas.

2. **ImageBitmap Rendering**:
   - **Test Name**: "ImageBitmap"
   - **Benchmark Definition**: `ctxImageBitmap.drawImage(imageBitmap,0,0); ctxImageBitmap.clearRect(0,0,700,700);`
   - **Description**: Here, an `ImageBitmap` is used, which is a more optimized representation of an image for drawing operations. The bitmap is prepared asynchronously using `createImageBitmap()`, which allows for faster rendering performance as it provides a ready-to-use image for manipulation.

3. **Canvas Rendering**:
   - **Test Name**: "Canvas"
   - **Benchmark Definition**: `ctxCanvas.drawImage(canvas,0,0); ctxCanvas.clearRect(0,0,700,700);`
   - **Description**: In this test case, an existing canvas (which has the image drawn on it) is used as the source of the drawing operation. Essentially, this tests how efficiently the browser can draw from an already-rendered canvas instead of from an image file.

### Performance Results:
The test results show the number of executions per second for each method:
- **Image**: 257,576.20 executions per second
- **Canvas**: 252,611.77 executions per second
- **ImageBitmap**: 247,192.02 executions per second

### Pros and Cons:

- **Image**:
  - **Pros**: Straightforward to use; widely supported.
  - **Cons**: Loading an image with `Image` can introduce latency due to the need for the image to be fully loaded before rendering.

- **ImageBitmap**:
  - **Pros**: Optimized for fast rendering and can be transferred to web workers; allows offscreen canvas drawing. Prepares the image asynchronously, reducing rendering lag in frames.
  - **Cons**: Requires an additional step of creating the bitmap from the image, which may need consideration in terms of overall complexity and memory usage.

- **Canvas**:
  - **Pros**: Can be very efficient for rendering graphics that are already prepared; reduces redundancy as multiple drawings can come from the same canvas.
  - **Cons**: The initial rendering and preparation of the canvas must be done, which could lead to higher initial processing times compared to directly rendering an image.

### Library and Features Used:
- **`createImageBitmap()`**: This is a web API function used to create an `ImageBitmap` from an `HTMLImageElement`, `HTMLCanvasElement`, or `Blob`. This function prepares an image more optimally for rendering in a canvas context.
- **Canvas API**: The testing involves the Canvas API, which is a powerful feature of HTML5 allowing dynamic, scriptable rendering of 2D shapes and bitmap images.

### Alternatives Considered:
1. **Canvas with OffscreenCanvas**: Instead of using the visible canvas in the DOM, an `OffscreenCanvas` can be utilized for rendering in web workers, which might provide better performance depending on the use case, especially for complex renderings.

2. **WebGL**: For more advanced rendering tasks, WebGL can be considered, allowing for 3D rendering and better GPU utilization. It can be more efficient for certain applications but has a steeper learning curve.

3. **CSS Graphics**: CSS3 can also be used for simpler shapes and effects, but for image rendering, it lacks the versatility provided by the Canvas API.

In summary, the benchmark provides valuable insights into the performance implications of using different methods for image rendering in the canvas. Understanding the strengths and weaknesses of these different approaches helps in making informed decisions tailored to specific application requirements.

Related benchmarks:

Canvas context2d: Image vs ImageBitmap vs Canvas (with clear canvas and alpha true) (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):