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

compare drawing lots of sprites (filled circles and squares) using various canvas methods II (version: 2)

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.

Comparing performance of: draw squares vs draw circles vs drawImage squares vs drawImage circles vs putImageData squares vs putImageData circles

Created: 5 years ago by: Registered User

Jump to the latest result

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)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
draw squares
draw circles
drawImage squares
drawImage circles
putImageData squares
putImageData circles

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/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
draw squares	1494.5 Ops/sec
draw circles	6.1 Ops/sec
drawImage squares	240.2 Ops/sec
drawImage circles	243.0 Ops/sec
putImageData squares	913.4 Ops/sec
putImageData circles	915.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and its test cases to explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The `MeasureThat.net` website is testing various methods for drawing sprites (filled circles and squares) onto an HTML5 canvas element. The goal is to compare the performance of different approaches in rendering these shapes.

**Test Cases**

There are six test cases:

1. **draw squares**
	* Tested method: `ctxs[0].beginPath()`, followed by `doMany(drawSquare)` and finally `ctxs[0].fill()`
2. **draw circles**
	* Tested method: `ctxs[1].beginPath()`, followed by `doMany(drawCircle)` and finally `ctxs[1].fill()`
3. **drawImage squares**
	* Tested method: Using `doMany(drawImageSquare)`
4. **drawImage circles**
	* Tested method: Using `doMany(drawImageCircle)`
5. **putImageData squares**
	* Tested method: Using `doMany(putImageDataSquare)`
6. **putImageData circles**
	* Tested method: Using `doMany(putImageDataCircle)`

**Comparison**

Each test case compares the performance of a different approach:

1. **Path-based rendering**: Test 1 and 2 use the path-based rendering method (`beginPath()` and `fill()`) to draw shapes.
2. **ImageData-based rendering**: Tests 3, 4, and 5 use `drawImage()` or `putImageData()` to render shapes.
3. **ImageData-based rendering with immediate drawing**: Tests 5 and 6 use `putImageData()` to render shapes immediately after creating the ImageData object.

**Pros and Cons**

Here's a brief summary of each approach:

1. **Path-based rendering**:
	* Pros: Fast, efficient, and suitable for simple shapes.
	* Cons: May require more CPU cycles due to path manipulation.
2. **ImageData-based rendering**:
	* Pros: Can be faster than path-based rendering for complex shapes or large datasets.
	* Cons: Requires additional memory allocations and may lead to performance issues if not optimized correctly.
3. **ImageData-based rendering with immediate drawing**:
	* Pros: Eliminates the need for intermediate ImageData objects, reducing memory allocation and deallocation overhead.
	* Cons: May require more complex code and can be slower due to the immediate rendering.

The test results show that Opera 82 browser performs relatively well in all test cases, but the performance differences between approaches are noticeable.

Related benchmarks: