render-vs-prerender (v82)

Revision 82 of this benchmark created on

Preparation HTML

<canvas id="canvas1" width="26" height="26"></canvas>
<canvas id="canvas2" width="26" height="26"></canvas>
<script>
  var can = document.getElementById('canvas1');
  var ctx = can.getContext('2d');
  var can3 = document.getElementById('canvas2');
  var ctx3 = can.getContext('2d');
  
  var can2 = document.createElement('canvas');  
  var ctx2 = can2.getContext('2d');
  var can22 = document.createElement('canvas');  
  var ctx22 = can22.getContext('2d');

  function drawMinusPlus(ctx, color, lineColor, isPlus, size) {

    var radius = 12;
    var lineStart = 6;
    var lineLength = 20;

    if (size == 'small') {
        radius = 10;
        lineStart = 8;
        lineLength = 18;
    }

    if (!lineColor)
        lineColor = "#FFFFFF";

    ctx.clearRect(0, 0, 26, 26);
    ctx.restore();
    ctx.save();

    ctx.beginPath();
    ctx.fillStyle = ctx.strokeStyle = color;
    ctx.arc(13, 13, radius, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = lineColor;
    ctx.moveTo(lineStart, 13);
    ctx.lineTo(lineLength, 13);
    ctx.stroke();

    if (isPlus == "true") {

        ctx.moveTo(13, lineStart);
        ctx.lineTo(13, lineLength);
        ctx.stroke();
    }

    ctx.closePath();
}
  
  
      
      
  
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
render
drawMinusPlus(ctx, 'blue')
drawMinusPlus(ctx3, 'blue')
ready
pre-rendered
 drawMinusPlus(ctx2, 'blue')
 drawMinusPlus(ctx22, 'blue')
ready

Revisions

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