Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
HTMLImageElement vs HTMLCanvasElement vs ImageBitmap Forked
CanvasRenderingContext2d::drawImage with HTMLImageElement vs HTMLCanvasElement vs ImageBitmap
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=588331" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0
Browser:
Firefox 135
Operating system:
Windows
Device Platform:
Desktop
Date tested:
one year ago
Test name
Executions per second
HTMLImageElement
1598705920.0 Ops/sec
HTMLCanvasElement
1550881280.0 Ops/sec
ImageBitmap
1611754752.0 Ops/sec
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);