Critical canvas size

JavaScript performance comparison

Revision 2 of this test case created by jdm

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.

Testing in unknown unknown
Test Ops/sec
255x240 canvas
// async test
window.deferred = deferred;
requestAnimationFrame(step);
pending…
255x250 canvas
// async test
window.deferred = deferred;
requestAnimationFrame(step);
pending…
255x251 canvas
// async test
window.deferred = deferred;
requestAnimationFrame(step);
pending…
255x260 canvas
// async test
window.deferred = deferred;
requestAnimationFrame(step);
pending…

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:

0 comments

Add a comment