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

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: one month 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

Test name	Executions per second
HTMLImageElement	92945752.0 Ops/sec
HTMLCanvasElement	99438448.0 Ops/sec
ImageBitmap	95128624.0 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.

Related benchmarks:

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

Jump to the latest result

HTMLImageElement

HTMLCanvasElement

ImageBitmap

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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