render-vs-prerender (v118)

Revision 118 of this benchmark created by ray on

Preparation HTML

<canvas id="canvas1" width="500" height="500"></canvas>
    <script>
      var can = document.getElementById('canvas1');
      var ctx = can.getContext('2d');
      
      var can2 = document.createElement('canvas');
      can2.width = 100;
      can2.height = 100;
      var ctx2 = can2.getContext('2d');
      
      var circles = [];

      for(var i = 0; i < 30; i++){
        circles.push({x: Math.random()*500, y: Math.random()*500});
      }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
render
ctx.clearRect(0,0,500,500);

for(var i = 0; i < circles.length; i++){
var circle = circles[i];
      ctx.beginPath();
      ctx.arc(circle.x, circle.y, 10, 0, 2 * Math.PI);
      ctx.fillStyle = "rgba(97,148,188,0.5)";
      ctx.fill();
      ctx.lineWidth = 0;
      ctx.strokeStyle = "rgba(97,148,188,0.5)";
      ctx.stroke();
}
 
ready
pre-rendered
ctx.clearRect(0,0,500,500);

var size = 10;
can2.width = size*2 + 2;
can2.height = size*2 + 2;
      ctx2.beginPath();
      ctx2.arc(size + 1, size + 1, size, 0, 2 * Math.PI);
      ctx2.fillStyle = "rgba(97,148,188,0.5)";
      ctx2.fill();

for(var i = 0; i < circles.length; i++){
var circle = circles[i];
ctx.drawImage(can2, circle.x-size-1, circle.y-size-1);
}
ready
render-opt
ctx.clearRect(0,0,500,500);

ctx.fillStyle = "rgba(97,148,188,0.5)";
ctx.lineWidth = 0;
ctx.strokeStyle = "rgba(97,148,188,0.5)";
for(var i = 0; i < circles.length; i++){
var circle = circles[i];
      ctx.beginPath();
      ctx.arc(circle.x, circle.y, 10, 0, 2 * Math.PI);
      ctx.fill();
      ctx.stroke();
}
 
ready
no stroke
ctx.clearRect(0,0,500,500);

for(var i = 0; i < circles.length; i++){
var circle = circles[i];
      ctx.beginPath();
      ctx.arc(circle.x, circle.y, 10, 0, 2 * Math.PI);
      ctx.fillStyle = "rgba(97,148,188,0.5)";
      ctx.fill();
      ctx.lineWidth = 0;
}
 
ready

Revisions

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