title: rendering special effects in html5 canvas only when frame rate allows it
body: <p>I setup my game loop as follows:</p>
  
  <pre><code>    window.requestAnimFrame = (function(){
          return  window.requestAnimationFrame   ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              window.oRequestAnimationFrame      ||
              window.msRequestAnimationFrame     ||
              function( callback ){
                  window.setTimeout(callback, 1000 / 60);
              };
      })();
      (function gameLoop() {
          var time                =   new Date().getTime();
          var dt                  =   (time - prevFTime) / 1000.0;
          prevFTime               =   time;
  
          state.effectsOn         =   dt &gt; 1 / 60.0 ? true : false;
          state.effectsOn         =   false;
  
          //game rendering logic goes here
  
          window.requestAnimFrame(gameLoop);
      })();
  </code></pre>
  
  <p>Now what I want to do is if the <code>effectsOn</code> variable is set in cause of good frame rate, then I will render some special effects in my game. If not, I will simply skip rendering those special effects.</p>
  
  <p>But my obvious problem is that if <code>dt&gt;1/60</code> and effectsOn is set to true. I will be rendering special effects which ll lead to increasing in rendering time, thus possibility of making <code>dt &lt; 1/60</code> thus making effectsOn to false.</p>
  
  <p>Is there any good alternative way to achieve what I am trying to do?</p>
  
  <p>In the worst case, I can put up a check box sort of thing in my main menu and let the user decide whether to render special effects or not...</p>