render-vs-prerender (v16)

Revision 16 of this benchmark created by Canvas integer coordinates vs. coordinates + .5 on

Preparation HTML

<canvas id="canvas1" width="500" height="500">
</canvas>
<script>
  var can = document.getElementById('canvas1');
  var ctx = can.getContext('2d');
  var arrComplexPath = [2.59999,118.6,2.5,116.6,2,113.6,1.7,110.3,1.2,106.7,0.599991,103.7,0.199997,102.1,0,100.4,0.399994,98.6,1.39999,96.2,1.79999,95.4,2.79999,94.2,4.39999,92.7,5.5,91.7,7,90.5,8.7,89.4,10.3,88.5,11.8,87.6,13.5,86.2,14.9,85.1,16.4,84,17.8,82.9,19.2,81.8,20.6,80.6,21.9,79.6,23.5,78.2,25,76.9,26.7,75.5,28.2,73.8,29,72.2,30.1,68.8,31.5,64.1,32,60.9,32.6,59.4,33.7,57.7,35.9,55.2,36.9,53.9,38.1,53,39.3,52.3,40.6,51.5,42.2,50.2,43.6,48.9,45.4,47.5,46.8,46.6,48.3,45.7,50,44.4,50.9,43.5,51.3,42.9,51.6,41.5,51.6,39.8,51.2,38.2,50,35.2,49.1,32.4,47.4,28.8,46.2,25.6,44.3,20,44,16.8,43.9,15,44.1,14.3,45.7,10.7,47.3,8.70001,48.8,7.29999,49.9,6.29999,51.5,4.59998,53.7,3.09998,55.3,1.79999,57.2,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>

Test runner

Ready to run.

Testing in
TestOps/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();
ready
pre-rendered
ctx.drawImage(can2, 0, 300);
ready

Revisions

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