Run results for: compare drawing lots of sprites (filled circles and squares) using various canvas methods II

Test name	Executions per second
✓ draw squares	1,495 Ops/sec
putImageData circles	915 Ops/sec
putImageData squares	913 Ops/sec
drawImage circles	243 Ops/sec
drawImage squares	240 Ops/sec
draw circles	6 Ops/sec

Script Preparation code:

var N = 1000
const dim = {
    width: 1024,
    height: 768
}
var ctxs = []
const SZ = 4
const SZ2 = 2 * SZ
const TWO_PI = 2 * Math.PI

for (let i = 0; i < 6; i++) {
    const canvas = document.createElement("canvas")
    Object.assign(canvas, dim)
    ctxs.push(canvas.getContext("2d"))
}

function randXY() {
    const x = dim.width * Math.random()
    const y = dim.height * Math.random()
    return [x, y]
}

/*
 * Square stuff
 */
function drawSquare() {
    ctxs[0].rect(...randXY(), SZ2, SZ2)
}

const buffer = document.createElement("canvas")
buffer.width = SZ2
buffer.height = 2 * SZ2
const bufferCtx = buffer.getContext("2d")
bufferCtx.fillRect(0, 0, SZ2, SZ2)

function drawImageSquare() {
    ctxs[1].drawImage(buffer, 0, 0, SZ2, SZ2, ...randXY(), SZ2, SZ2)
}

const imageDataSquare = bufferCtx.getImageData(0, 0, SZ2, SZ2)
function putImageDataSquare() {
    ctxs[2].putImageData(imageDataSquare, ...randXY())
}

/*
 * Circle stuff
 */
function drawCircle() {
    const ctx = ctxs[3]
    ctx.arc(...randXY(), SZ, 0, TWO_PI)
    ctx.closePath()
}

// draw a circle onto the buffer, below the square
bufferCtx.beginPath()
bufferCtx.arc(SZ2, 1.5*SZ2, SZ, 0, TWO_PI)
bufferCtx.closePath()
bufferCtx.fill()

function drawImageCircle() {
    ctxs[4].drawImage(buffer, 0, SZ2, SZ2, SZ2, ...randXY(), SZ2, SZ2)
}

const imageDataCircle = bufferCtx.getImageData(0, SZ2, SZ2, SZ2)
function putImageDataCircle() {
    ctxs[5].putImageData(imageDataCircle, ...randXY())
}


function doMany(func) {
    for (let i = 0; i < N; i++) {
        func()
    }
}

Tests:

draw squares
ctxs[0].beginPath() doMany(drawSquare) ctxs[0].fill()
draw circles
ctxs[1].beginPath() doMany(drawCircle) ctxs[1].fill()
drawImage squares
doMany(drawImageSquare)
drawImage circles
doMany(drawImageCircle)
putImageData squares
doMany(putImageDataSquare)
putImageData circles
doMany(putImageDataCircle)

Run results for: compare drawing lots of sprites (filled circles and squares) using various canvas methods II

draw squares

draw circles

drawImage squares

drawImage circles

putImageData squares

putImageData circles