Benchmark: canvas drawing images

HTML Preparation code:

<canvas></canvas>

Script Preparation code:

 'use strict'
let image,
    imageData,
    ctx = new OffscreenCanvas(0, 0).getContext('2d'),
    main = document.querySelector('canvas'),
    c = main.getContext('2d'),
    width, height,
    imageAsBlob,
    imageAsBitmap
async function globalMeasureThatScriptPrepareFunction() {
    image = await loadImage();
    ({
        width,
        height
    } = image)
    ctx.canvas.width = main.width = width
    ctx.canvas.height = main.height = height
    ctx.drawImage(image, 0, 0, width, height)
    imageData = ctx.getImageData(0, 0, width, height)
    imageAsBlob = await loadImage(URL.createObjectURL(await ctx.canvas.convertToBlob()))
}

function loadImage(url = `https://www.measurethat.net/images/Picture1.png`) {
    return new Promise(resolve => {
        const img = new Image
        img.src = url
        img.onload = () => resolve(img)
    })
}

function clear() {
    c.clearRect(0, 0, width, height)
}
const repeatCount = 40

function test(num) {
    switch (num) {
        case 1:
            for (let n = repeatCount; n--;) {
                c.drawImage(image, 0, 0, width, height)
                clear()
            }
            break
        case 2:
            for (let n = repeatCount; n--;) {
                c.putImageData(imageData, 0, 0,)
                clear()
            }
            break
        case 3:
            for (let n = repeatCount; n--;) {
                c.drawImage(imageAsBlob, 0, 0)
                clear()
            }
            break
    }
}

Tests:

draw image directly
test(1)
draw imageData
test(2)
draw image blob
test(3)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
draw image directly
draw imageData
draw image blob

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
draw image directly	31184.7 Ops/sec
draw imageData	298.0 Ops/sec
draw image blob	30245.3 Ops/sec

Related benchmarks:

canvas drawing images (version: 1)

Comparing performance of: draw image directly vs draw imageData vs draw image blob

Created: one year ago by: Guest

Jump to the latest result

draw image directly

draw imageData

draw image blob

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A