Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
HTMLImageElement vs HTMLCanvasElement vs ImageBitmap
CanvasRenderingContext2d::drawImage with HTMLImageElement vs HTMLCanvasElement vs ImageBitmap
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=554555" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
Browser:
Chrome 128
Operating system:
Mac OS X 10.15.7
Device Platform:
Desktop
Date tested:
one year ago
Test name
Executions per second
HTMLImageElement
25206286.0 Ops/sec
HTMLCanvasElement
26347610.0 Ops/sec
ImageBitmap
25954708.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://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);