Same rectangle drawn despite different array value
<p>I have a tile array which looks like so:</p>

<pre><code>var gameCanvas = document.getElementById('canvas');
var ctx = gameCanvas.getContext("2d");

var mapArray = [
[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,0],
[1,1,0,0,0,0,0,0,0,0,1,2,0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0],
[1,1,1,1,0,0,0,0,0,0,1,2,2,2,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0],
[1,1,1,1,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,3,0,0,0]
];
</code></pre>

<p>and a loop which draws tiles to the canvas from that map</p>

<pre><code>var posX = 0;
var posY = 0;

for(i=0; i &lt; mapArray.length; i++){
    for(j=0; j &lt; mapArray[i].length; j++){
        if(mapArray[i][j] == 1){
            ctx.rect(posX, posY, 32, 32);
            ctx.fillStyle="black";
        }
        if(mapArray[i][j] == 2){
            ctx.rect(posX, posY, 32, 32);
            ctx.fillStyle="red";
        }
        if(mapArray[i][j] == 3){
            ctx.rect(posX, posY, 32, 32);
            ctx.fillStyle="blue";
        }
        ctx.fill();
        posX += 32;     
    }
    posX = 0;
    posY +=32;  
}
</code></pre>

<p>Every '1' in the array is displayed as a black square as expected. 
The problem is, every '2' and '3' are also displayed as a black square despite the declaration of a different colour in the <code>fillStyle</code> of that if statement. </p>

<p>When logged, each if statement returns the value (1,2 or 3) as expected.</p>