Implementei o código na tela inteira e deu certo. Porém, tenho uma dúvida sobre o for.

Olá Cristiano, talvez seja problema na identação.

Oi Cristiano, Blz?! Com for aninhado, no seu caso dois fors, cada interação do primeiro for irá fazer todas as interações do segundo for, ou seja para cada loop do primeiro for você faz 8 loops do segundo. A quantidade de interações totais que você está fazendo é 12 * 8; Já no segundo caso você está percorrendo apenas um loop e com uma interação por loop, só que nesse caso você está com 2 contadores e dois incrementos. A quantidade de interações totais nesse loop é de 8 apenas.

Talvez fique mais claro com o while: Com o loop aninhado:

var x = 0;
var y = 0;
while(x < 600) {
    while(y < 400) {
        desenhaQuadrado(x, y, "green", "red");
        y += 50;
    }
    x += 50
}

Já utilizando o loop com dois contadores:

var x = 0;
var y = 0;

while(x < 600 && y < 400) { // Quando o y >= 400 o loop acaba
    desenhaQuadrado(x, y, "green", "red");
    x += 50;
    y += 50;
}

Espero que tenha ficado claro.

Olá , a programaçao nao entendo dessa matematica mas eu mudei o código de igualdade por concatenar, porem ainda assim aparece apenas uma cor.

tenta e me responde blz!!

<!-- Desenhando Um Quadrado! -->
<canvas width="600" height="400"></canvas>

<script>
    function desenhaQuadrado(x, y, cor){

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = cor;
    pincel.fillRect(x, y, 50, 50);
    pincel.fillStroke = 'black';
    pincel.strokeRect(x, y, 50, 50);
    }

for(var x = 0; x < 600; x = x +=50)    {
    for (var y = 0; y < 400; y = y +=50) {
        desenhaQuadrado(x, y, "blue", "yellow");
    }

}

</script>

Oi, Alessandro! Eu tentei dessa forma aqui, e deu o resultado que vc queria.

<canvas width="600" height="400"></canvas>

<script>

    function desenhaQuadrado(x, y, cor) {

        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, 50, 50);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y, 50, 50);

    }

    var guardaCor = "blue";   // Salva a cor da primeira linha     

    for(var y = 0; y < 400; y = y +=50) {
        var cor = guardaCor; // define a cor da linha com o valor salvo em guardaCor
        if (guardaCor == "blue") // se a cor atual em guardaCor é igual a azul, altera a cor para amarelo
            guardaCor = "yellow";
        else // caso contrário, altera a cor para azul
            guardaCor = "blue";
        console.log(x);

        for (var x = 0; x < 600; x = x +=50) {            
            desenhaQuadrado(x, y, cor);
            console.log(y);        
        }

    }

</script>