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=622997" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:146.0) Gecko/20100101 Firefox/146.0
Browser:
Firefox 146
Operating system:
Linux
Device Platform:
Desktop
Date tested:
4 months ago
Test name
Executions per second
HTMLImageElement
627005760.0 Ops/sec
HTMLCanvasElement
628495104.0 Ops/sec
ImageBitmap
625533056.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);