Hola Gilbert,
No logramos entender lo que quisiste decir en este post.
Si conseguiste la solución te sugerimos implementar en código y compartir para poder ver las diferentes soluciones al mismo problema.
Puedes hacerlo clicando en este botón y colocando tu código entre los acentos:
lo siento no me hice entender, la solución está en el código que postee
Como se muestra en la imagen de abajo, su código no aparece para nosotros aquí, así que te mostré en mi comentario arriba cómo usted puede hacer para publicar su código en nuestro foro.
<meta charset="UTF-8">
<h1 >Usando canvas</h1>
<!--Creamos nuestro espacio de dibujo-->
<canvas width="600" height="400">
</canvas>
<!--Creamos nuestro espacio de Script-->
<script >
/*
Creamos función para dibujar con parámetros
*/
function draw(x,y,w,h,color){
var screen=document.querySelector("canvas");
var brush= screen.getContext("2d");
/*
pasamos parámetros y atributos al pincel
*/
brush.fillStyle=color;
brush.fillRect(x,y,w,h);
brush.strokeStyle="black";
brush.strokeRect(x,y,w,h);
}
/*
definimos las variables necesarias
*/
var width=600;
var height=400
var w=50;
var h=50;
var x=0;
var y=0;
var color=["red","green","blue","yellow","black","purple"];
var iColor=0;
/*
creamos bucle for para rellenar el rectangulo
*/
for(var i=0;i<=width;i++){
/*
llamamos la función draw y le pasamos los parámetros
*/
draw(x,y,w,h,color[iColor]);
x=x+50;
iColor++;
/*
si el array de color llego a su ultima posición se reinicia
*/
if(iColor>5){
iColor=0;
}
/*
cambiando la posición de y para rellenar en vertical
*/
if(i===width && y<=height){
y=y+50;
x=0;
iColor++;
i=0
/*
alterando el orden de los colores para que no queden en vertical
*/
if(iColor===5){
iColor=1;
iColor++;
}
}
}
Intenté ejecutar tu código pero no funciona, al parecer tiene algún error. Por ejemplo, veo que hay comparación en el if con tres iguales ===, me parece que eso es incorrecto.
Saludos