Las iteraciones son fantásticas

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

<script>



     function dibujarCuadradoVerde(x1,y1,color){
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = color ;
        pincel.fillRect(x1,y1,50,50);
        pincel.strokeStyle= "black";
        pincel.strokeRect(x1,y1,50,50);
    }

    function numeroAleatorio(min, max) {
        return Math.round(Math.random() * (max - min ) + min );

    }


    let colores = ["red","yellow","green","blue"];
for(var x = 0 ; x < 600 ; x = x + 50 ){
    dibujarCuadradoVerde(x ,0,colores[numeroAleatorio(0,3)]);
    dibujarCuadradoVerde(x ,50,colores[numeroAleatorio(0,3)]);
    dibujarCuadradoVerde(x ,100,colores[numeroAleatorio(0,3)]);
    dibujarCuadradoVerde(x ,150,colores[numeroAleatorio(0,3)]);



}

/*
    var x = 0;
    var y = 0;

    while( x < 600  ){

            dibujarCuadradoVerde(x ,0,colores[numeroAleatorio(0,3)]);
            dibujarCuadradoVerde(x ,50,colores[numeroAleatorio(0,3)]);
            dibujarCuadradoVerde(x ,100,colores[numeroAleatorio(0,3)]);
            dibujarCuadradoVerde(x ,150,colores[numeroAleatorio(0,3)]);
        x = x + 50;

    }

*/
   /*
    dibujarCuadradoVerde(x ,50,colores[numeroAleatorio(0,3)]);
        dibujarCuadradoVerde(x ,100,colores[numeroAleatorio(0,3)]);

  */



</script>