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: 3 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()
    }
}

​x
 
var N = 1000const dim = {    width: 1024,    height: 768}var ctxs = []const SZ = 4const SZ2 = 2 * SZconst 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 = SZ2buffer.height = 2 * SZ2const 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 squarebufferCtx.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()
ctxs[0].beginPath()
doMany(drawSquare)
ctxs[0].fill()
draw circles
ctxs[1].beginPath() doMany(drawCircle) ctxs[1].fill()
ctxs[1].beginPath()
doMany(drawCircle)
ctxs[1].fill()
drawImage squares
doMany(drawImageSquare)
doMany(drawImageSquare)
drawImage circles
doMany(drawImageCircle)
doMany(drawImageCircle)
putImageData squares
doMany(putImageDataSquare)
doMany(putImageDataSquare)
putImageData circles
doMany(putImageDataCircle)
doMany(putImageDataCircle)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.58

Browser/OS: Opera 82 on Windows

View result in a separate tab

Test name	Executions per second
draw squares	554.2 Ops/sec
draw circles	300.6 Ops/sec
drawImage squares	78.9 Ops/sec
drawImage circles	84.1 Ops/sec
putImageData squares	4.2 Ops/sec
putImageData circles	5.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

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:

draw squares: Drawing multiple squares using path drawing methods.
draw circles: Drawing multiple circles using the arc method.
drawImage squares: Drawing multiple squares by copying them from a buffer using the drawImage method.
drawImage circles: Drawing multiple circles by copying them from a buffer using the drawImage method.
putImageData squares: Drawing multiple squares by copying pixel data from a buffer using the putImageData method.
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.

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**

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**

Related benchmarks: