Benchmark: HTMLImageElement vs HTMLCanvasElement vs ImageBitmap Forked

Script Preparation code:

var
natrualWidth = 0,
naturalHeight = 0,

eleImg = document.createElement("img"),
cvsImg = document.createElement("canvas"),
bmpImg = null,

canvasEleImg = document.createElement("canvas"),
canvasCvsImg = document.createElement("canvas"),
canvasBmpImg = document.createElement("canvas"),

ctxEleImg = canvasEleImg.getContext("2d"),
ctxCvsImg = canvasCvsImg.getContext("2d"),
ctxBmpImg = canvasBmpImg.getContext("2d"),

doneLoading = false;

canvasEleImg.width = canvasBmpImg.width = canvasCvsImg.width = 640;
canvasEleImg.height = canvasBmpImg.height = canvasCvsImg.height = 480;

eleImg.addEventListener("load", function()
{
	cvsImg.width = naturalWidth = eleImg.naturalWidth;
	cvsImg.height = naturalHeight = eleImg.naturalHeight;
	cvsImg.getContext("2d").drawImage(eleImg, 0, 0, natrualWidth, naturalHeight, 0, 0, natrualWidth, naturalHeight);

	Promise.all([
		createImageBitmap(img)
	]).then(function(images)
	{
		imageBitmap = images[0];

		doneLoading = true;
	}, false);
});
eleImg.src = "https://new.imagehostx.com/upload/2025/02/22/e5306382-3a31-4214-bbcf-b1661db689cb_1740191464.jpg";

Tests:

HTMLImageElement
if (doneLoading) ctxEleImg.drawImage(eleImg, 0, 0, natrualWidth, naturalHeight, 0, 0, natrualWidth, naturalHeight);
HTMLCanvasElement
if (doneLoading) ctxCvsImg.drawImage(cvsImg, 0, 0, natrualWidth, naturalHeight, 0, 0, natrualWidth, naturalHeight);
ImageBitmap
if (doneLoading) ctxBmpImg.drawImage(bmpImg, 0, 0, natrualWidth, naturalHeight, 0, 0, natrualWidth, naturalHeight);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
HTMLImageElement
HTMLCanvasElement
ImageBitmap

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Windows

View result in a separate tab

Test name	Executions per second
HTMLImageElement	1598705920.0 Ops/sec
HTMLCanvasElement	1550881280.0 Ops/sec
ImageBitmap	1611754752.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark in question compares the performance of three different methods for drawing images in a web context using the `CanvasRenderingContext2d::drawImage` function: `HTMLImageElement`, `HTMLCanvasElement`, and `ImageBitmap`. The performance is measured in executions per second, indicating how many times each method can be executed in a given timeframe.

### Approaches Compared

1. **HTMLImageElement**:
   - **Description**: This is a standard HTML image element used for loading and displaying images in the DOM.
   - **Benchmark Definition**: The image is drawn onto a canvas from the `HTMLImageElement` once it has fully loaded.
   - **Performance**: This method is fast, achieving an execution rate of approximately 1.59 billion executions per second.

2. **HTMLCanvasElement**:
   - **Description**: This represents a drawable region in an HTML document, and it is typically used for rendering graphics on the fly.
   - **Benchmark Definition**: This test uses a canvas element that's drawn from another canvas that has an image rendered onto it.
   - **Performance**: While this method is efficient, it ranks slightly lower with around 1.55 billion executions per second.

3. **ImageBitmap**:
   - **Description**: `ImageBitmap` is an object that represents a bitmap image that can be rendered on a canvas. This object is optimized for rendering performance.
   - **Benchmark Definition**: This method draws the already prepared `ImageBitmap` onto a canvas.
   - **Performance**: It achieves the highest performance in this test, with approximately 1.61 billion executions per second.

### Pros and Cons of Each Approach

- **HTMLImageElement**:
  - **Pros**: Simplicity and wide compatibility; it works with standard image URLs.
  - **Cons**: May incur overhead when continuously redrawing or manipulating large images.
  
- **HTMLCanvasElement**:
  - **Pros**: Provides more control over graphics rendering; can manipulate pixel data easily.
  - **Cons**: Additional overhead in creating and maintaining can lead to slightly slower performance.

- **ImageBitmap**:
  - **Pros**: Designed for high-performance graphics; bypasses some of the overhead associated with traditional DOM image rendering.
  - **Cons**: Slightly more complex usage, as it requires an additional step to create the bitmap from an image or canvas.

### Other Considerations

- **Concurrency**: The tests run after confirming images load successfully with a flag (`doneLoading`). This is significant because it prevents attempts to draw images that are not yet ready, which could skew performance metrics.
  
- **Use Case**: For applications where performance is critical (e.g., games or fast-rendering graphics apps), `ImageBitmap` is superior. However, typical web applications that require displaying content might find `HTMLImageElement` adequately performant without needing more complexity.

### Alternatives

In addition to the approaches tested, developers can explore:

- **SVG (Scalable Vector Graphics)**: Ideal for vector images which can be manipulated with high quality; performance may vary based on complexity.
- **WebGL**: For more intensive graphics rendering, especially in 3D or high-performance 2D games. This offers a more robust framework but has a steeper learning curve.
- **CSS background images**: Although not a direct method for drawing images onto a canvas, CSS can be used creatively for layouts, providing less control over pixel manipulation but potentially reducing the need for canvas operations.

Overall, the choice between `HTMLImageElement`, `HTMLCanvasElement`, and `ImageBitmap` will depend on specific application requirements, image handling needs, and desired performance characteristics.

Related benchmarks:

HTMLImageElement vs HTMLCanvasElement vs ImageBitmap Forked (version: 1)

CanvasRenderingContext2d::drawImage with HTMLImageElement vs HTMLCanvasElement vs ImageBitmap

Comparing performance of: HTMLImageElement vs HTMLCanvasElement vs ImageBitmap

Created: 2 months ago by: Guest

Jump to the latest result

HTMLImageElement

HTMLCanvasElement

ImageBitmap

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):