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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

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

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

Browser/OS: Firefox 116 on Windows

View result in a separate tab

Test name	Executions per second
HTMLImageElement	680865800.0 Ops/sec
HTMLCanvasElement	705925600.0 Ops/sec
ImageBitmap	696603300.0 Ops/sec

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: 9 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