Info

If the canvas gets bigger than 255x250, the framerate in Firefox (17, Linux) suddenly drops. Above and below that threshold, the framerate is fairly constant and only falls slowly with size.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<canvas id="canvas" width="200" height="200" style="border: 1px solid #888"></canvas>
<script>
  Benchmark.prototype.setup = function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var start = new Date().getTime();
    window.setupCalled = false;
    
    // Cross-browser requestAnimationFrame shim
    window.requestAnimationFrame = (function() {
      return window.requestAnimationFrame ||
             window.mozRequestAnimationFrame ||
             window.webkitRequestAnimationFrame ||
             window.msRequestAnimationFrame ||
             window.oRequestAnimationFrame;
    })();
    
    if (ui.benchmarks[0].running) {
      canvas.width = 255;
      canvas.height = 240;
      ctx.fillStyle = "green";
    } else if (ui.benchmarks[1].running) {
      canvas.width = 255;
      canvas.height = 250;
      ctx.fillStyle = "blue";
    } else if (ui.benchmarks[2].running) {
      canvas.width = 255;
      canvas.height = 251;
      ctx.fillStyle = "orange";
    } else if (ui.benchmarks[3].running) {
      canvas.width = 255;
      canvas.height = 260;
      ctx.fillStyle = "violet";
    }
    
    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
    
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
    
        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
          && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
    }
    
    window.step = function() {
      if (!isScrolledIntoView(canvas)) {
        throw "Error: The canvas must be on screen!";
      }
    
      ctx.clearRect(0, 0, 200, 200);
    
      var progress = new Date().getTime() - start;
      var x = 100 + 20 * Math.cos(progress / 2000 * 2 * Math.PI);
      var y = 100 - 20 * Math.sin(progress / 2000 * 2 * Math.PI);
      ctx.beginPath();
      ctx.arc(x, y, 10, 0, 2*Math.PI, true);
      ctx.closePath();
      ctx.fill();
    
      window.deferred.resolve();
    };
  };
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

// async test
window.deferred = deferred;
requestAnimationFrame(step);

// async test
window.deferred = deferred;
requestAnimationFrame(step);

// async test
window.deferred = deferred;
requestAnimationFrame(step);

// async test
window.deferred = deferred;
requestAnimationFrame(step);

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:

• Revision 1: published by jdm on 16th January 2013
• Revision 2: published by jdm on 17th January 2013

0 comments