No puedo parar de jugar con esto.. estoy como niño con juguete nuevo!! jaja

Aqui se me ocurrió que queria todos cuadraditos de diferentes colores, 3 colores.. Me costó; pero lo logré..

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

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

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

function crearCuadrado(x, y, color){
    pincel.fillStyle= color;
pincel.fillRect(x,y,50,50);
pincel.strokeStyle="black";
pincel.strokeRect(x,y,50,50);

}
//crear cuadrados todo el canvas
var color="black";var col=1;
for(x=0; x<600; x=x+50){//filas


    for(y=0; y<400; y=y+50){//columnas

                switch(col){
                    case 1: 
                    color="red";
                    break;
                    case 2:
                        color="yellow";
                        break;
                    case 3:
                        color="green";
                        break;

                    default:
                        color="white";
                        break;
                    }


                crearCuadrado(x, y,color);
                col++;
                if(col==4){
                col=1;

        }
    }


}

</script>