Benchmark: Offscreen canvas vs cached Path2D vs no cache

HTML Preparation code:

<canvas id="test-canvas"></canvas>

Script Preparation code:

const COUNT = 100

const offscreens = new Array(COUNT)
for (let i=0; i<COUNT; i++) {
  const canvas = document.createElement('canvas')
  canvas.width = 100
  canvas.height = 50
  const ctx = canvas.getContext('2d')
  ctx.fillStyle = "red"
  ctx.fillRect(0, 0, 100, 50)
  offscreens[i] = canvas
}

const path2ds = new Array(COUNT)
for (let i=0; i<COUNT; i++) {
  const path2d = new Path2D()
  path2d.rect(0, 0, 100, 50)
  path2ds[i] = path2d
}

const canvas = document.getElementById('test-canvas')
const ctx = canvas.getContext('2d')

Tests:

Create instances of offscreen canvas
const results = new Array(COUNT) for (let i=0; i<COUNT; i++) { const canvas = document.createElement('canvas') canvas.width = 100 canvas.height = 50 const ctx = canvas.getContext('2d') ctx.fillStyle = "red" ctx.fillRect(0, 0, 100, 50) results[i] = canvas }
Create instances of Path2D
const results = new Array(COUNT) for (let i=0; i<COUNT; i++) { const path2d = new Path2D() path2d.rect(0, 0, 100, 50) results[i] = path2d }
Render offscreen canvases
for (let i=0; i<COUNT; i++) { ctx.drawImage(offscreens[i], 0, 0, 100, 50) }
Render Path2D
for (let i=0; i<COUNT; i++) { ctx.fillStyle = "red" ctx.fill(path2ds[i]) }
Render directly with ctx.fillRect()
for (let i=0; i<COUNT; i++) { ctx.fillStyle = "red" ctx.fillRect(0, 0, 100, 50) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Create instances of offscreen canvas
Create instances of Path2D
Render offscreen canvases
Render Path2D
Render directly with ctx.fillRect()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:152.0) Gecko/20100101 Firefox/152.0

Browser/OS: Firefox 152 on Linux

View result in a separate tab

Render directly with ctx.fillRect()

21K/s

Create instances of Path2D

16K/s

Render Path2D

16K/s

Render offscreen canvases

7K/s

Create instances of offscreen canvas

280/s

View exact numbers

Test name	Executions per second
✓ Render directly with ctx.fillRect()	20,717 Ops/sec
Create instances of Path2D	16,372 Ops/sec
Render Path2D	15,589 Ops/sec
Render offscreen canvases	7,356 Ops/sec
Create instances of offscreen canvas	280 Ops/sec

Offscreen canvas vs cached Path2D vs no cache (version: 1)

Comparing performance of: `Create instances of offscreen canvas vs Create instances of Path2D vs Render offscreen canvases vs Render Path2D vs Render directly with ctx.fillRect()`

Created: one year ago by: Guest

Go to the latest result

Create instances of offscreen canvas

Create instances of Path2D

Render offscreen canvases

Render Path2D

Render directly with ctx.fillRect()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Offscreen canvas vs cached Path2D vs no cache (version: 1)

Comparing performance of: Create instances of offscreen canvas vs Create instances of Path2D vs Render offscreen canvases vs Render Path2D vs Render directly with ctx.fillRect()

Created: one year ago by: Guest

Go to the latest result

Create instances of offscreen canvas

Create instances of Path2D

Render offscreen canvases

Render Path2D

Render directly with ctx.fillRect()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `Create instances of offscreen canvas vs Create instances of Path2D vs Render offscreen canvases vs Render Path2D vs Render directly with ctx.fillRect()`