title: HTML5 Canvas flicker in FireFox 4
body: <p>I'm working on a proof of concept on an HTML5 canvas.  I was able to get this working like a charm in Chrome and IE9, but in Firefox 4 I'm getting constant flicker as it redraws the canvas.  I've tried a few techniques mentioned on this site like double buffering but I'm still getting a large amount of flicker.  Any insight on this would be appreciated!</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;  
  body
  {  
      margin:0px;  
      padding:0px;  
      text-align:center;  
  } 
  canvas
  {  
      outline:0;  
      border:1px solid #000;  
      margin-top: 10px;
      margin-left: auto;  
      margin-right: auto;  
  }  
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  var canvasWidth = 640;
  var thisXPos = 0;
  var canvasHeight = 820;
  var thisYPos = 0;
  var canvas = null;
  var context = null;
  var gLoop = null;
  var rain = [];
  var rainImg = "images/raindrop.gif";
  var bgImg = null;
  var i;
  
  for (i = 0; i &lt; howManyLetters; i++)
  {
      rain.push([Math.floor(Math.random() * canvasWidth), Math.floor(Math.random() * canvasHeight),rainImg]);
  }
  
  var DrawRain = function()
  {
      for (i = 0; i &lt; 10; i++)
      {
          thisXPos = rain[i][0];
          thisYPos = rain[i][1];
          imgSrc = rain[i][2];
          letterImg = new Image();
          letterImg.setAtX = thisXPos;
          letterImg.setAtY = thisYPos;
          letterImg.onload = function()
          {
              context.drawImage(this, this.setAtX, this.setAtY);
          }
          letterImg.src = imgSrc;
      }
  };
  
  var MoveRain = function(e)
  {
      for (i = 0; i &lt; 10; i++)
      {
          if ((rain[i][1] - 5) &gt; canvasHeight)
          {
              randomnumber = Math.floor(Math.random()*26);
  
              rain[i][0] = Math.random() * canvasWidth;
              rain[i][1] = 0;
              rain[i][2] = rainImg;
          }
          else
          {
              rain[i][1] += e;
          }
      }
  };
  
  var clear = function()
  {
      context.beginPath();
      context.rect(0, 0, canvasWidth, canvasHeight);
      context.closePath();
  
      bgImg = new Image();
      bgImg.src = "images/bg.png";
      bgImg.onload = function()
      {
          context.drawImage(bgImg,0,0);
      }
  } 
  
  var GameLoop = function()
  {
      context.save();
      clear();
      MoveRain(1);
      DrawRain();
      context.restore();
  
      gLoop = setTimeout(GameLoop, 10);
  }
  
  function loadGame()
  {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
  
      GameLoop();
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="loadGame();"&gt;
      &lt;canvas id="gameCanvas"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>