Las iteraciones son fantásticas

me adelante un poco y hice algo mas o menos asi deje comentado el while por si alguien gusta testearlo

<meta charset="UTF-8">

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

</canvas>


<script>
    function dibujarCuadrado(x,y, color){
        var pantalla=document.querySelector("canvas");
        var pincel= pantalla.getContext("2d");
        pincel.fillStyle=color;
        pincel.fillRect(x,y,50,50);
        pincel.strokeStyle="black";
        pincel.strokeRect(x,y,50,50);
    }

    // var vuelta=0;
    // var width=600;

    // while(vuelta < width){
    //     dibujarCuadrado(vuelta,0,"red");
    //     dibujarCuadrado(vuelta,50,"yellow");
    //     dibujarCuadrado(vuelta,100,"green");

    //     vuelta=vuelta+50;
    // }

    for(var vuelta=0; vuelta<600; vuelta=vuelta+50){
        var color=["red","yellow","green"];
        var colorContador=0;
        for(var vuelta2=0; vuelta2<150; vuelta2=vuelta2+50){
            icolor=color[colorContador];
            dibujarCuadrado(vuelta,vuelta2,icolor);
            colorContador++;
        }
    }

</script>