Benchmark: Canvas cache or Path 2D

HTML Preparation code:

<canvas/>

Script Preparation code:

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d')
var rects = new Array(100).fill({ x: 100, y: 100, width: 100, height: 100, fill: 'blue' })

Tests:

Cached canvas
for (var rect of rects) { var cached = document.createElement('canvas') cached.width = rect.width cached.height = rect.height rect.cached = cached.getContext('2d') rect.cached.fillStyle = rect.fill rect.cached.fillRect(0, 0, rect.width, rect.height) ctx.drawImage(rect.cached.canvas, rect.x, rect.y, rect.width, rect.height) } for (var rect of rects) { ctx.drawImage(rect.cached.canvas, rect.x, rect.y, rect.width, rect.height) }
Cached Path2D
for (var rect of rects) { rect.path = new Path2D() rect.path.rect(0, 0, rect.width, rect.height) ctx.fillStyle = rect.fill ctx.fill(rect.path) } for (var rect of rects) { ctx.fillStyle = rect.fill ctx.fill(rect.path) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Cached canvas
Cached Path2D

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 22 hours ago)

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

Browser/OS: Chrome 122 on Linux

View result in a separate tab

Test name	Executions per second
Cached canvas	79.8 Ops/sec
Cached Path2D	2045.8 Ops/sec

Canvas cache or Path 2D (version: 0)

Comparing performance of: Cached canvas vs Cached Path2D

Created: 2 years ago by: Guest

Jump to the latest result

Cached canvas

Cached Path2D

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A