Run results for: drawImage() img vs canvas vs bitmap + cropping

Run details:

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/136.0.7103.91 Mobile/15E148 Safari/604.1

Browser: Chrome Mobile iOS 136

Operating system: iOS 18.4.1

Device Platform: Mobile

Date tested: one year ago

bitmap

395.5M/s

canvas

328.2M/s

img

326.7M/s

View exact numbers

Test name	Executions per second
✓ bitmap	395,536,576 Ops/sec
canvas	328,185,024 Ops/sec
img	326,725,440 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)