Preparation code

<canvas id="gameCanvas" width="300" height="500">
  Canvas element not supported
</canvas>
<script>
  Benchmark.prototype.setup = function() {
    // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
    // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
    // requestAnimationFrame polyfill by Erik Möller
    // fixes from Paul Irish and Tino Zijdel
    (function() {
      var lastTime = 0;
      var vendors = ['ms', 'moz', 'webkit', 'o'];
      for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
      }
    
      if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() {
          callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
      };
    
      if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
      };
    }());
    
    ourCanvas = document.getElementById("gameCanvas");
    context = ourCanvas.getContext('2d');
    var img = new Image()
    img.src = 'https://www.google.com/intl/ar_ALL/images/logos/images_logo_lg.gif';
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

var filterStrength = 50;
var frameTime = 30,
    lastLoop = new Date,
    thisLoop;

function gameLoop() {

  var thisFrameTime = (thisLoop = new Date) - lastLoop;
  frameTime += (thisFrameTime - frameTime) / filterStrength;
  lastLoop = thisLoop;

  setTimeout(function() {
    //code for any thing
    context.drawImage(img, 0, 0, 100, 100);
    requestAnimationFrame(gameLoop);

  }, 1000 / frameTime);
}

var frameTime = 30;

function gameLoop() {
  setTimeout(function() {
    //code for any thing
    context.drawImage(img, 0, 0, 100, 100);

    requestAnimationFrame(gameLoop);

  }, 1000 / frameTime);
}

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 Solieman on 16th January 2013
• Revision 2: published by Solieman on 17th January 2013
• Revision 3: published by Solieman on 17th January 2013

0 comments