Benchmark: HTMLImageElement vs HTMLCanvasElement vs ImageBitmap

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://media.discordapp.net/attachments/447410261289205781/574359442913492992/unknown.png";

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

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Chrome 22 runs

HTMLCanvasElement

26.9M/s

ImageBitmap

26.6M/s

HTMLImageElement

26.0M/s

View exact numbers

✓ HTMLCanvasElement: 26,851,564 ops/sec
• ImageBitmap: 26,623,088 ops/sec
• HTMLImageElement: 26,004,400 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
HTMLImageElement
HTMLCanvasElement
ImageBitmap

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Browser/OS: Chrome 146 on Linux

View result in a separate tab

HTMLCanvasElement

99.4M/s

ImageBitmap

95.1M/s

HTMLImageElement

92.9M/s

View exact numbers

Test name	Executions per second
✓ HTMLCanvasElement	99,438,448 Ops/sec
ImageBitmap	95,128,624 Ops/sec
HTMLImageElement	92,945,752 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Overview**

The benchmark tests three different ways to draw an image on a canvas: `HTMLImageElement`, `HTMLCanvasElement`, and `ImageBitmap`. The test case uses a single image source and measures the execution time for each approach. The goal is to determine which method is the fastest.

**Options Compared**

There are three options compared:

1. **HTMLImageElement**: This option uses the `drawImage` method on an `img` element, which is then used as the source of a `canvas` element.
2. **HTMLCanvasElement**: This option uses the `drawImage` method directly on the `canvas` element without using an intermediate `img` element.
3. **ImageBitmap**: This option converts the image to a bitmap and then draws it on the canvas using the `drawImage` method.

**Pros and Cons of Each Approach**

1. **HTMLImageElement**
	* Pros: Simple and straightforward approach, easy to understand and implement.
	* Cons: Requires an extra step to create an `img` element, which may introduce unnecessary overhead.
2. **HTMLCanvasElement**
	* Pros: Directly drawing on the canvas eliminates the need for an intermediate image element.
	* Cons: May require more complex code and understanding of the underlying rendering pipeline.
3. **ImageBitmap**
	* Pros: Utilizes modern Web API, can be more efficient than traditional `drawImage` methods.
	* Cons: Requires conversion to a bitmap format, which may introduce additional overhead.

**Library Used**

In this benchmark, the following libraries are used:

1. None explicitly mentioned (the code relies on built-in browser functionality)
2. However, it's worth noting that modern browsers support various Web APIs for image processing and rendering, such as `Canvas`, `WebGL`, and `ImageBitmap`.

**Special JavaScript Features**

This benchmark does not require any special JavaScript features or syntax.

**Other Considerations**

When choosing an approach, consider the following factors:

* Performance: If speed is critical, using `HTMLCanvasElement` might be a better choice due to its direct access to the rendering pipeline.
* Code complexity: Using `HTMLImageElement` is generally easier to understand and implement.
* Future-proofing: As Web APIs evolve, adopting modern features like `ImageBitmap` might provide future benefits.

**Alternatives**

If you're looking for alternative approaches or variations on this benchmark:

1. **Test different image sources**: Vary the image size, format, or quality to see how each approach handles different scenarios.
2. **Compare rendering pipelines**: Experiment with other rendering APIs like `WebGL` or `SketchGles2` to compare performance and complexity.
3. **Measure render-time vs. execute-time**: Measure the time it takes for each approach to complete execution (i.e., setting up the test environment) versus the actual rendering time.

These variations can provide additional insights into the performance and usability of different approaches.

HTMLImageElement vs HTMLCanvasElement vs ImageBitmap (version: 0)

CanvasRenderingContext2d::drawImage with HTMLImageElement vs HTMLCanvasElement vs ImageBitmap

Comparing performance of: `HTMLImageElement vs HTMLCanvasElement vs ImageBitmap`

Created: 4 years ago by: Guest

Go to the latest result

HTMLImageElement

HTMLCanvasElement

ImageBitmap

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Chrome 22 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

HTMLImageElement vs HTMLCanvasElement vs ImageBitmap (version: 0)

CanvasRenderingContext2d::drawImage with HTMLImageElement vs HTMLCanvasElement vs ImageBitmap

Comparing performance of: HTMLImageElement vs HTMLCanvasElement vs ImageBitmap

Created: 4 years ago by: Guest

Go to the latest result

HTMLImageElement

HTMLCanvasElement

ImageBitmap

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Chrome 22 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: `HTMLImageElement vs HTMLCanvasElement vs ImageBitmap`