render-vs-prerender (v14)

Revision 14 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.5,113.4,0.899994,108.7,0.300003,105.6,0,102.6,0.199997,100.2,0.5,99.6,1.5,98.4,2.8,97.4,4.3,96.4,6.10001,94.7,8.3,93.2,10,91.8,11.8,90.5,13.3,89.1,14.2,88.3,15,87.2,15.6,86,16.7,84.5,18,81.3,18.9,78.6,19.1,75.1,19.2,71.2,19.6,69.6,20.3,68.1,21.4,66.4,22.8,64.9,24.3,63.5,25.8,62.4,27.3,61.4,28.9,60.6,30.4,60,31.8,59.2,33.6,58,35.6,56.2,37.8,53,38.3,52.4,39,51.1,40,48.4,40.6,46.3,40.9,43.8,41.1,40.7,41.7,37.4,42.3,34,42.4,33.1,42.8,31.6,43.5,30.2,45.2,28.1,47.5,25.4,50.2,23,51.9,21.6,53.5,20.3,55.4,17.9,56.6,16,58,12.7,58.6,8.79999,59.6,5.40002,60.1,4,60.4,3.40002,60.9,2.90002,63.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.