Benchmark: HTMLImageElement vs HTMLCanvasElement vs ImageBitmap, using placekitten

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://placekitten.com/200/300";

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: 6 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 141 on Android

View result in a separate tab

Test name	Executions per second
HTMLImageElement	46518092.0 Ops/sec
HTMLCanvasElement	43970124.0 Ops/sec
ImageBitmap	46726008.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is tested, compared, and other considerations.

**Benchmark Definition:**
The test compares three different approaches to draw an image on a canvas:

1. `HTMLImageElement` (using the native drawing method)
2. `HTMLCanvasElement` (using the `drawImage` method of the canvas context)
3. `ImageBitmap` (converting the image to a bitmap and then using the `drawImage` method)

**Test Case Descriptions:**

### HTMLImageElement
The test case uses the native drawing method, which is the most straightforward way to draw an image on a canvas. However, it may not be as efficient as other methods.

### HTMLCanvasElement
The test case uses the `drawImage` method of the canvas context, which allows for more flexibility and customization when drawing images. This approach can be slower than native drawing due to additional overhead from the browser's rendering engine.

### ImageBitmap
The test case converts the image to a bitmap using `createImageBitmap` and then uses the `drawImage` method on the resulting bitmap object. This approach requires additional resources (memory) to store the bitmap data, which can impact performance.

**Options Compared:**

* Native drawing (`HTMLImageElement`)
* Canvas context drawing (`HTMLCanvasElement`)
* Bitmap-based drawing (`ImageBitmap`)

**Pros and Cons:**

* **Native Drawing (`HTMLImageElement`)**:
	+ Pros: Fastest, most straightforward implementation
	+ Cons: May not be as efficient due to additional overhead from the browser's rendering engine
* **Canvas Context Drawing (`HTMLCanvasElement`)**:
	+ Pros: More flexible and customizable, can handle various image formats
	+ Cons: Slower than native drawing due to additional overhead from the browser's rendering engine
* **Bitmap-Based Drawing (`ImageBitmap`)**:
	+ Pros: Can be more efficient for certain use cases (e.g., image processing)
	+ Cons: Requires additional memory to store bitmap data, slower than native drawing

**Library/Technology Used:**

* `createImageBitmap`: A browser API that converts an image into a bitmap.
* `CanvasRenderingContext2D`: The canvas context provides methods for drawing and manipulating graphics.

**Special JS Feature/Syntax:**
The benchmark uses the following special JavaScript feature:

* `Promise.all`: A built-in method for executing multiple promises concurrently and awaiting their resolution.

**Other Considerations:**

* The test case uses a placeholder image (`https://placekitten.com/200/300`) to avoid any potential issues with loading images.
* The test cases are designed to run on desktop platforms, which may affect the results on mobile or web platforms.

**Alternatives:**
If you want to explore alternative approaches, consider using:

* WebGL for high-performance rendering
* Web Workers for parallel processing of image data
* Other libraries (e.g., Pixi.js, fabric.js) that provide custom drawing and manipulation APIs

Related benchmarks:

HTMLImageElement vs HTMLCanvasElement vs ImageBitmap, using placekitten (version: 0)

CanvasRenderingContext2d::drawImage with HTMLImageElement vs HTMLCanvasElement vs ImageBitmap

Comparing performance of: HTMLImageElement vs HTMLCanvasElement vs ImageBitmap

Created: 2 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):