title: HTML5/Canvas flickering animation
body: <p>I've read <a href="https://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering">Does HTML5/Canvas Support Double Buffering?</a> and related questions and I use double buffering but it's doesent help <em>some times</em>. Actually I use another way for double buffering but it have same issue.</p>
  
  <pre><code>function drawLoop() {
      var scr_context = scr.getContext('2d'); // main canvas
      var units_context = units_buffer.getContext('2d'); // units buffer
      var unitcolors_context = unitcolors_buffer.getContext('2d'); // units color buffer
      var i;
  
      // background
      scr_context.fillStyle = "#FFFFEE";
      scr_context.fillRect(0, 0, scr.width, scr.height);
  
      units_context.clearRect(0, 0, units_buffer.width, units_buffer.height);
      unitcolors_context.clearRect(0, 0, unitcolors_buffer.width, unitcolors_buffer.height);
  
      for (i = 0; i &lt; units_list.length; i++) {
          units_list[i].draw(units_context, camera); // flicker some times
          units_list[i].drawColor(unitcolors_context, camera); // never flicker
      }
  
      scr_context.drawImage(unitcolors_buffer, 0, 0);
      scr_context.drawImage(units_buffer, 0, 0);
  
      drawTimer = setTimeout(drawLoop, 1000 / FPS);
  }
  </code></pre>
  
  <p>Draw methods:</p>
  
  <pre><code>this.draw = function(context, camera) {
      var sprite;
      var drawCoordinates;
      sprite = this.sloader.getSpriteByName(this.spritePos.spriteName);
      drawCoordinates = sprite.getDrawCoordinatesByXY(this.spritePos.x, this.spritePos.y, camera);
      context.drawImage(sprite.getImage(), drawCoordinates.x, drawCoordinates.y);
      return;
  }
  this.drawColor = function(context, camera) {
      var sprite;
      var drawCoordinates;
      sprite = this.sloader.getSpriteByName(this.spritePos.spriteName);
      drawCoordinates = sprite.getDrawCoordinatesByXY(this.spritePos.x, this.spritePos.y, camera);
      context.putImageData(this.unitMarkBackground, drawCoordinates.x + 21, drawCoordinates.y + 17);
      return;
  }
  </code></pre>
  
  <p>Have no idea how flickering happen or never happen in almost same code, same buffered. I've test it in Chrome 20 and FireFox 13, both hase same issue.</p>