title: Javascript Canvas refresh flicker
body: <p>I am writing a basic chess gui in html5/javascript and I have a question on how to avoid the flicker when I redraw the canvas control.  Basically I am drawing the chess pieces from a 2D array and every time I redraw the array, I clear the canvas which creates a slight flicker.  What would be the best way to avoid this?  Thank you in advance, Dave.</p>
  
  <pre><code>//Array of chess pieces
  var PieceArray = ["Null", "WhiteKing", "WhiteQueen", "WhiteKnight", "WhiteBishop", "WhiteRook", "WhitePawn", "BlackKing", "BlackQueen", "BlackKnight", "BlackBishop", "BlackRook", "BlackPawn"]
  
  //Current state of the chess pieces on the board
  var BoardArray = [[11, 9, 10, 8, 7, 10, 9, 11],
                    [12, 12, 12, 12, 12, 12, 12, 12],
                    [0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 0, 0, 0, 0, 0, 0, 0],
                    [6, 6, 6, 6, 6, 6, 6, 6],
                    [5, 3, 4, 2, 1, 4, 3, 5]];
  
  //Param1: Image Url
  //Param2: X position
  //Param3: Y position
  function Draw(image, x, y) {
      var can = document.getElementById('ChessBoard');
      var context = can.getContext('2d');
      context.clearRect(0, 0, can.width, can.height);
      var imageObj = new Image();
      imageObj.src = 'Sprites/' + image + ".png";
      imageObj.onload = function () {
          context.drawImage(imageObj, x, y);
      };
  }
  
  //Function that draws the chess pieces to the canvas
  function DrawPieces() {
      var array2;
      for (var i = 0; i &lt; BoardArray.length; i++) {
          array2 = BoardArray[i];
          for (var x = 0; x &lt; array2.length; x++) {
              if (array2[x] != "Null") {
                  Draw(PieceArray[array2[x]], x * 70, i * 70);
              }
          }
      }
  }
  </code></pre>