render-vs-prerender-for-circle (v50)

Revision 50 of this benchmark created on

Preparation HTML

<canvas id="canvas1" width="100" height="100">
</canvas>

Setup

var can = document.getElementById('canvas1')
    var ctx = can.getContext('2d')
    var M2PI = Math.PI * 2

Test runner

Ready to run.

Testing in
TestOps/sec
render 1
for (var i = 0; i < 1; i++) {
  ctx.fillStyle = 'black'
  ctx.fillRect(0, 0, 100, 100)
  ctx.beginPath()
  ctx.strokeStyle = 'red'
  ctx.lineWidth = 1
  ctx.arc(20, 20, 10, 0, M2PI, true)
  ctx.stroke()
}
ready
render 3
for (var i = 0; i < 3; i++) {
  ctx.fillStyle = 'black'
  ctx.fillRect(0, 0, 100, 100)
  ctx.beginPath()
  ctx.strokeStyle = 'red'
  ctx.lineWidth = 1
  ctx.arc(20, 20, 10, 0, M2PI, true)
  ctx.stroke()
}
ready
render 10
for (var i = 0; i < 10; i++) {
  ctx.fillStyle = 'black'
  ctx.fillRect(0, 0, 100, 100)
  ctx.beginPath()
  ctx.strokeStyle = 'red'
  ctx.lineWidth = 1
  ctx.arc(20, 20, 10, 0, M2PI, true)
  ctx.stroke()
}
ready
pre-rendered 1
var can2 = document.createElement('canvas')
can2.width = 30
can2.height = 30
var ctx2 = can2.getContext('2d')
ctx2.beginPath()
ctx2.strokeStyle = 'red'
ctx2.lineWidth = 1
ctx2.arc(15, 15, 10, 0, M2PI, true)
ctx2.stroke()

for (var i = 0; i < 1; i++) {
  ctx.fillStyle = 'black'
  ctx.fillRect(0, 0, 100, 100)
  ctx.drawImage(can2, 5, 5)
}
ready
pre-rendered 3
var can2 = document.createElement('canvas')
can2.width = 30
can2.height = 30
var ctx2 = can2.getContext('2d')
ctx2.beginPath()
ctx2.strokeStyle = 'red'
ctx2.lineWidth = 1
ctx2.arc(15, 15, 10, 0, M2PI, true)
ctx2.stroke()

for (var i = 0; i < 3; i++) {
  ctx.fillStyle = 'black'
  ctx.fillRect(0, 0, 100, 100)
  ctx.drawImage(can2, 5, 5)
}
ready
pre-rendered 10
var can2 = document.createElement('canvas')
can2.width = 30
can2.height = 30
var ctx2 = can2.getContext('2d')
ctx2.beginPath()
ctx2.strokeStyle = 'red'
ctx2.lineWidth = 1
ctx2.arc(15, 15, 10, 0, M2PI, true)
ctx2.stroke()

for (var i = 0; i < 10; i++) {
  ctx.fillStyle = 'black'
  ctx.fillRect(0, 0, 100, 100)
  ctx.drawImage(can2, 5, 5)
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.