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

This benchmark compares methods of drawing lots of sprites onto a HTML5 canvas element. We test two basic "sprites": a filled square and a filled circle. We can explicitly draw them with path drawing methods, or drawing a prototype and copying them onto the canvas multiple times, using drawImage, or putImageData.

Go to the benchmark

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4300.0 Safari/537.36

Browser: Chrome 88

Operating system: Linux

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
draw squares	883.3 Ops/sec
draw circles	1.0 Ops/sec
drawImage squares	291.0 Ops/sec
drawImage circles	288.4 Ops/sec
putImageData squares	1.1 Ops/sec
putImageData circles	1.1 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