render-vs-prerender (v12)

Revision 12 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 = [0, 119.3, 0.900002, 116.5, 2.2, 114.2, 4.60001, 111.4, 5.5, 110.3, 6.4, 108.8, 7.7, 107.6, 9.9, 106.1, 11.3, 105.2, 13.7, 104.3, 16, 103.6, 18.4, 103.3, 20.7, 102.7, 22.6, 102, 24.1, 101, 27.3, 98.3, 28.6, 96.8, 29.6, 95.2, 30.8, 92.1, 31.7, 88.7, 32.4, 85.8, 33.1, 82.5, 33.2, 81.7, 33.4, 81, 34, 79.8, 35.1, 78.3, 37.4, 76.4, 39.4, 75.2, 41.8, 74.3, 43.8, 73.5, 45.4, 72.3, 47.5, 70.6, 48.7, 69.6, 51.1, 66.7, 53, 63.6, 54.4, 61, 54.9, 59.1, 55.4, 56.1, 56, 52.9, 56.6, 49.8, 57.5, 46.4, 58.9, 42.9, 59.8, 40.6, 61.9, 37.5, 63.7, 35, 64.8, 34.2, 66, 33.6, 68.3, 31.9, 69.8, 31, 71.9, 29.2, 74, 27.3, 76, 25.9, 77.3, 25.2, 77.8, 24.8, 79.8, 22.3, 80.5, 20.9, 81.5, 18, 82.2, 15.3, 82.9, 12.1, 83.2, 9.20001, 83.3, 5.70001, 83.5, 3.79999, 84.6, 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.