render-vs-prerender-for-circle

JavaScript performance comparison

Revision 50 of this test case created

Preparation code

<canvas id="canvas1" width="100" height="100">
</canvas>
<script>
Benchmark.prototype.setup = function() {
    var can = document.getElementById('canvas1')
    var ctx = can.getContext('2d')
    var M2PI = Math.PI * 2
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/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()
}
pending…
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()
}
pending…
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()
}
pending…
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)
}
pending…
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)
}
pending…
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)
}
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment