title: Render Function using two for loops (matrix) does not render each piece
body: <p>I am creating a chess with modified rules and came across a problem when rendering the pieces to a canvas. The pieces are stored in a matrix called gameState and works in the [x] and [y] axis. From my testing the console logs the appropriate number of renders match the number of pieces stored in the matrix, however not all of the pieces render except in certain configurations they end up rendering as desired but most of the time only 1 type of piece renders.</p>
  
  <p>I have tried moving around the ctx.clear, drawImage and where I declare the source. I suspect the problem to be lying within how I declare the src, if a queen gets drawn, all other queens also get drawn, and vice versa. Also by logging the draw step in the console I can see that the code is looping correctly.</p>
  
  <pre><code>function renderGame(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for(y=0;y&lt;32;y++){
      for(x=0;x&lt;32;x++){
        if(gameState[x][y]!=undefined){
          var piece=gameState[x][y];
          if(piece.toString().charAt(0)==1){
            console.log("drew a king");
            pieceImage.src="king.png";
            ctx.drawImage(pieceImage,x*100,y*100);
          }
          else if(piece.toString().charAt(0)==2){
            console.log("drew a queen");
            pieceImage.src="queen.png";
            ctx.drawImage(pieceImage,x*100,y*100);
          }
        }
      }
    }
  }
  </code></pre>
  
  <p>I expected that each piece is rendered when the if function detects it as belonging to the "white" player which is stored in the second character of the integer which itself is stored in the matrix. While the first character tells the renderer what piece it is, a king or queen in this code for example.</p>