Preencher a tela (600*400) com quadrados

Bom dia meu aluno!

Gostei muito do fato de você querer ir além. Vou respeitar sua solução e vou modificá-la ligeiramente. Veja como fica:

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

<script>
    function desenhaQuadrado(x, y, cor, margem) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

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

    var x = 0;
    var y = 0
    var cor = 'green';

    while(x < 600 && y < 400){
        desenhaQuadrado(x, y, cor, 'yellow');
        x = x + 50;
        if(x == 550) {
            x = 0;
            y = y + 50;
        }
    }   

</script>

Veja que precisamos incrementar o y para que ele vá de linha em linha.

Porém, eu resolveria usando um for dentro de outro, veja:

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

<script>
    function desenhaQuadrado(x, y, cor, margem) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

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

    var cor = 'green';
    for(var linha = 0; linha < 400; linha = linha + 50) {
        for(var coluna = 0; coluna < 600; coluna = coluna + 50) {
            desenhaQuadrado(coluna, linha, cor, 'yellow');
        }
    }

</script>

Qual das duas você acha mais legível para você?

Sucesso e bom estudo!

Muito obrigado professor! Agora entendi o que estava faltando. Meu pensamento seguiu como no primeiro exemplo, mas não estava conseguindo "pular" para a linha de baixo, pois não colocava o 'x' para zerar, achava que se o fizesse o mesmo iria apagar a linha toda que havia, quando fazia o while e o if ele fazia tipo uma escada de quadrados ou em alguns casos fazia a primeira linha e depois apenas a borda amarela na vertical na ultima coluna. O segundo exemplo é mais simples, mas eu não pensei que o JS iria entender linhas, por isso não cogitei essa possibilidade.

Obrigado por mais uma vez por expandir meus horizontes!

Tranquilo meu aluno! Bora continuar os estudos porque o caminho é longo, porém espetacular!