Conflito no canvas

Fala meu aluno! Blz? Então, o problema é o seguinte, as instruções

 pincel.fillStyle = "lightgray";
 pincel.fillRect(0, 0, 600, 400);

Só podem ser executadas uma vez. O problema é que a cada desenhara você esta escrevendo-o novamente na tela fazendo com que o restante que você escreveu seja apagado.

Veja um exemplo para solucionar o seu problema:

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

<script>

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

    // desenho uma só vez e nunca mais
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);

    function drawnSquare(x, y, color) {
      // posso acessar pincel, porque a variável foi declarada fora da função, fica no escopo global
        pincel.fillStyle = color;
        pincel.fillRect(x, y, 50, 50);
        pincel.fillStroke = "black";
        pincel.strokeRect(x, y, 50, 50);
    }

    for( var x = 0; x < 600; x+= 50) {

        drawnSquare(x, 0, "red");
    }


</script>

Veja que fora da função eu declarei as variáveis pincel e tela. Como elas foram declaras foram da função, elas são acessíveis por qualquer função, nem preciso declará-las novamente dentro da função.

Pegou a ideia?