title: Game loop requestAnimFrame (javascript / canvas)
body: <p>I'm struggling with this and can't seem to find much reference to go on.</p>
  
  <p>I am using the requestAnimFrame that was written up by Google:</p>
  
  <pre><code>requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
       window.webkitRequestAnimationFrame ||
       window.mozRequestAnimationFrame ||
       window.oRequestAnimationFrame ||
       window.msRequestAnimationFrame ||
       function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
         window.setTimeout(callback, 1000/60);
       };
  })();
  </code></pre>
  
  <p>I have a function "init" which sets up my game. That then calls update which is the game loop which calls render to draw to canvas. If you ignore requestAnimFrame - each individual part works fine. Once I place a call to requestAnimFrame in though, I either get "too much recursion" error or FF just crashes.</p>
  
  <p>My code in update() is as follows:</p>
  
  <pre><code>game.update = function()
  {
      stats.update();
      fps.innerHTML = stats.getFPS();
  
  // Render objects
  game.render();
  // Continue game loop
  requestAnimFrame(game.update());
  }
  </code></pre>
  
  <p>stats.update just updates the FPS counter. So you can see, this function doesn't do a lot. My game.render function just draws a load of tiles onto the canvas and that works fine.</p>
  
  <p>Any suggestions?</p>
  
  <p>Thanks!</p>
  
  <p>Chris</p>