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

compare drawing lots of sprites (filled circles and squares) using various canvas methods II WITH ROUNDED PIXELS (version: 0)

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: 4 years ago by: Guest

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()|0
    const y = dim.height * Math.random()|0
    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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Measuring performance of JavaScript microbenchmarks is crucial for developers, and MeasureThat.net provides a valuable platform to compare different approaches.

**Benchmark Definition**

The provided JSON represents the benchmark definition for measuring the performance of drawing sprites (filled circles and squares) using various canvas methods. The benchmark consists of six test cases:

1. `draw squares`: Drawing multiple squares using path drawing methods.
2. `draw circles`: Drawing multiple circles using the arc method.
3. `drawImage squares`: Drawing multiple squares by copying them from a buffer using the `drawImage` method.
4. `drawImage circles`: Drawing multiple circles by copying them from a buffer using the `drawImage` method.
5. `putImageData squares`: Drawing multiple squares by copying pixel data from a buffer using the `putImageData` method.
6. `putImageData circles`: Drawing multiple circles by copying pixel data from a buffer using the `putImageData` method.

**Options Compared**

The benchmark compares different approaches for drawing sprites, which can significantly impact performance:

* **Path drawing methods** (`draw squares`): This approach involves using the canvas's path API to draw shapes. It is generally faster than other methods but may require more memory.
* **Arc method** (`draw circles`): This approach uses the `arc` method to draw circles, which can be slower than path drawing methods due to its iterative nature.
* **Copy and paste (drawImage)**: This approach involves copying shapes from a buffer and pasting them onto the canvas. It is generally faster but may require more memory.
* **Pixel data manipulation (putImageData)**: This approach copies pixel data directly from a buffer into the canvas, which can be slower due to the overhead of manipulating pixel data.

**Performance Implications**

The benchmark results show varying performance across different browsers and devices:

* `draw squares` and `draw circles` have similar performance, with Opera 82 performing better than Chrome 96.
* `drawImage squares` and `drawImage circles` have slower performance compared to path drawing methods, but still faster than pixel data manipulation.
* `putImageData squares` and `putImageData circles` have the slowest performance, indicating that copying and manipulating pixel data is not an efficient approach.

**Conclusion**

The benchmark highlights the importance of choosing the right approach for drawing sprites in JavaScript. Path drawing methods and the arc method tend to be faster than copy-and-paste approaches, while pixel data manipulation is generally slower. Developers should consider these factors when optimizing their performance-critical code.

Related benchmarks: