Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Canvas context2d: Image vs ImageBitmap vs Canvas
(version: 1)
Comparing performance of:
Image vs ImageBitmap vs Canvas
Created:
one year ago
by:
Guest
Jump to the latest result
Script Preparation code:
var img = new Image(); var imageBitmap; var doneLoading = false; let canvasImage = document.createElement('canvas'); canvas.width = 640; canvas.height = 480; let canvasImageBitmap = document.createElement('canvas'); canvas2.width = 640; canvas2.height = 480; let canvas = document.createElement('canvas'); canvas2.width = 640; canvas2.height = 480; let canvasCanvas = document.createElement('canvas'); canvas2.width = 640; canvas2.height = 480; var ctxImage = canvasImage.getContext('2d'); var ctxcImageBitmap = canvasImageBitmap.getContext('2d'); var ctx = canvas.getContext('2d'); var ctxCanvas = canvasCanvas.getContext('2d'); img.addEventListener('load', function() { Promise.all([ createImageBitmap(img) ]).then(function(images) { imageBitmap = images[0]; doneLoading = true; }, false); }); if (doneLoading) { ctx.drawImage(img,0,0) } img.src = 'https://1.bp.blogspot.com/-52MtzD0GfX0/WvP52CL1WjI/AAAAAAAAOVw/_OpK4JHeWK01d-7IiZ6vzojYGhXqLRXrACLcBGAs/s1600/EMxediL.jpg';
Tests:
Image
if (doneLoading) ctxImage.drawImage(img,0,0);
ImageBitmap
if (doneLoading) ctxImageBitmap.drawImage(imageBitmap,0,0);
Canvas
if (doneLoading) { ctxCanvas.drawImage(canvas,0,0) }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Image
ImageBitmap
Canvas
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
7 months ago
)
User agent:
Mozilla/5.0 (Android 16; Mobile; rv:143.0) Gecko/143.0 Firefox/143.0
Browser/OS:
Firefox Mobile 143 on Android
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Image
1115585664.0 Ops/sec
ImageBitmap
1115798912.0 Ops/sec
Canvas
1115882752.0 Ops/sec
Related benchmarks:
Image vs ImageBitmap with context2d
Image vs ImageBitmap vs cv with context2d
Image vs ImageBitmap vs canvas with context2d
Image vs canvas with 2d
Canvas Image vs Image Bitmap
Canvas context2d: Image vs ImageBitmap vs Canvas (new)
Canvas context2d: Image vs ImageBitmap vs Canvas (new new)
Canvas context2d: Image vs ImageBitmap vs Canvas (with clear canvas)
Canvas context2d: Image vs ImageBitmap vs Canvas (with clear canvas and alpha true)
Comments
Confirm delete:
Do you really want to delete benchmark?