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

Run details:

User agent: Mozilla/5.0 (Linux; U; Android 13; zh-cn; 2112123AC Build/TKQ1.220829.002) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/109.0.5414.118 Mobile Safari/537.36 XiaoMi/MiuiBrowser/18.1.110304 swan-mibrowser

Browser: Chrome Mobile 109

Operating system: Android

Device Platform: Mobile

Date tested: 2 years ago

empty

6.9M/s

bitmap

87K/s

canvas

72K/s

image

58K/s

View exact numbers

Test name	Executions per second
✓ empty	6,939,290 Ops/sec
bitmap	87,447 Ops/sec
canvas	72,305 Ops/sec
image	58,201 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://1.bp.blogspot.com/-52MtzD0GfX0/WvP52CL1WjI/AAAAAAAAOVw/_OpK4JHeWK01d-7IiZ6vzojYGhXqLRXrACLcBGAs/s1600/EMxediL.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:

empty
bitmap
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)
image
bitmap && c.drawImage(img, 250, 250, 250, 250, 0, 0, 1000, 1000)