Solução com a estrutura for

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

</canvas>

<script>

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

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho );
        pincel.fillStroke = '#4E2F2F';
        pincel.strokeRect(x, y, tamanho, tamanho);
    }

    var x = 0; 
    for (var i = 0;  i < 4; i++){
        if(i == 3) {
            cor = '#CC3299';
        } else {
            cor = '#00FF7F';
        }
        desenhaQuadrado(x, 0, 50, cor);
        x += 50;
    }


</script>

Achei legal sua solução, a minha fiz com for também mas ficou diferente. Coloquei como parametro pra condição o x ser menor que 200, assim quando o x somar com 50, vai ter 4 quadradinhos na tela. E o if para que se for menor que 150, desenha o quadradinho verde, e se maior desenha na cor branca.

<canvas width="600 height="400></canvas>
 <script>
        var canvas = document.querySelector("canvas")
        var pincel = canvas.getContext("2d")

        function desenhaquadrado(x,y,color){

            pincel.fillStyle=color
            pincel.fillRect(x,y,50,50)
            pincel.strokeRect(x,y,50,50)
        }

        for(var x = 0; x < 200; x += 50){
            if(x<150){
            desenhaquadrado(x,0,"green")
            } else{
             desenhaquadrado(x,0,"white")
            }
        }

    </script>
</body>

A tua lógica ficou bastante funcional também, isso mostra que a programação realmente há varias maneiras de solucionar o mesmo problema, e é por isso que considero uma arte apaixonante lidar com códigos. Parabenizo pela tua solução!!!!