render-vs-prerender

JavaScript performance comparison

Revision 13 of this test case created by Canvas integer coordinates vs. coordinates + .5

Preparation code

<canvas id="canvas1" width="500" height="500">
</canvas>
<script>
  var can = document.getElementById('canvas1');
  var ctx = can.getContext('2d');
  var arrComplexPath = [0,116.7,0.900009,113.3,2.3,110.1,3.60001,107,5.40001,104,7.3,102.1,9.7,99.6,10.8,98.9,12,98.3,14.1,96.7,16.3,94.9,18.1,93.2,20,91.7,21.6,90.3,22.4,89,23.5,86.1,24.3,82.8,24.5,80.1,24.7,76.7,25.2,73.8,26.2,69.7,27.5,66.8,28.5,64.7,30.5,62.2,32.4,60.3,33.5,59.6,35.4,58.6,37.1,57.3,39,55.8,41.2,54.2,42.5,53.1,43.6,51.9,44.7,50,45.9,46.5,47.5,41,47.9,37.6,48.1,34.2,48.3,33.5,48.9,32.3,49.6,31.2,50.1,30,51,28.9,52.7,27.2,54.9,25.3,58.6,22.3,60.3,20.8,61.8,19.6,63.9,18.4,65.6,17,67.1,15.9,68.1,14.6,69.2,12.7,69.4,12,69.8,9.70001,70,6.29999,71.3,0];

  var can2 = document.createElement('canvas');
  can2.width = 150;
  can2.height = 150;
  var ctx2 = can2.getContext('2d');

  var prevX = arrComplexPath[0];
  var prevY = arrComplexPath[1];
  var midX = prevX,
      midY = prevY;
  ctx2.beginPath();
  for (var i = 2; i < arrComplexPath.length; i += 2) {

    var xTo = arrComplexPath[i],
        yTo = arrComplexPath[i + 1];


    ctx2.moveTo(midX, midY);

    midX = (prevX + xTo) / 2;
    midY = (prevY + yTo) / 2;

    ctx2.quadraticCurveTo(prevX, prevY, midX, midY);


    prevX = xTo;
    prevY = yTo;
  }

  //line from last mid point to end of path.
  ctx2.moveTo(midX, midY);
  ctx2.lineTo(xTo, yTo);

  ctx2.stroke();
  ctx2.fill();
</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
 
  var prevX = arrComplexPath[0];
  var prevY = arrComplexPath[1];

var midX = prevX,
    midY = prevY;
ctx2.beginPath();
for (var i = 2; i < arrComplexPath.length; i += 2) {

  var xTo = arrComplexPath[i],
      yTo = arrComplexPath[i + 1];


  ctx.moveTo(midX, midY);

  midX = (prevX + xTo) / 2;
  midY = (prevY + yTo) / 2;

  ctx.quadraticCurveTo(prevX, prevY, midX, midY);


  prevX = xTo;
  prevY = yTo;
}

//line from last mid point to end of path.
ctx.moveTo(midX, midY);
ctx.lineTo(xTo, yTo);

ctx.stroke();
ctx.fill();
 pending…
pre-rendered
 
ctx.drawImage(can2, 0, 300);
 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