Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
drawImage() img vs canvas vs bitmap + cropping
Go to the benchmark
Embed
Embed Benchmark Result
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0
Browser:
Chrome 134
Operating system:
Windows
Device Platform:
Desktop
Date tested:
one year ago
Test name
Executions per second
img
235991456.0 Ops/sec
canvas
232259088.0 Ops/sec
bitmap
211057968.0 Ops/sec
Script Preparation code:
var canvas = document.createElement('canvas') var context = canvas.getContext('2d') var bitmap var img = new Image() img.onload = async () => { canvas.width = img.width canvas.height = img.height context.drawImage(img, 0, 0) bitmap = await createImageBitmap(img) } img.src = 'https://neurostof.nl/ns/letters.jpg' var c = document.createElement('canvas').getContext('2d') // bitmap && c.drawImage(img, 250, 250, 250, 250, 0, 0, 1000, 1000) // bitmap && c.drawImage(canvas, 250, 250, 250, 250, 0, 0, 1000, 1000) // bitmap && c.drawImage(bitmap, 250, 250, 250, 250, 0, 0, 1000, 1000)
Tests:
img
bitmap && c.drawImage(img, 250, 250, 250, 250, 0, 0, 1000, 1000)
canvas
bitmap && c.drawImage(canvas, 250, 250, 250, 250, 0, 0, 1000, 1000)
bitmap
bitmap && c.drawImage(bitmap, 250, 250, 250, 250, 0, 0, 1000, 1000)