Hola a todos, quiero compartirles este trozo de codigo que sin duda les podrá dar otras perspectivas para el dibujo Canvas. Se trata de una función donde podemos controlar tanto el relleno, el tamaño, la cantidad de iteraciones, y el eje en el cual se desea crear los cuadros(Horizontal o vertical). Espero les ayude ¡Saludos!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Mejorado</title>
</head>
<body>
<canvas width="1024" height="600"></canvas>
<script>
var pantalla=document.querySelector('canvas');
var pincel= pantalla.getContext('2d');
function bote(x,y,width,heigth,color,bColor,cantidad,ejeRepetición) {
for(var i=1;i<=cantidad;i++){
pincel.fillStyle=color; //Para dar Color
pincel.fillRect(x,y,width,heigth); //para trazar un rectangulo con relleno.
pincel.strokeStyle=bColor; //Sirve para dar color al borde.
pincel.strokeRect(x,y,width,heigth); //Dar forma al borde.
if(ejeRepetición=='x')x+=width; // x si quiero que se repita lateralmente.
if(ejeRepetición=='y')y+=heigth; //y si quiero que se repita verticalmente.
}
bote(0,0,49,100,'green','black',10,'x');
bote(0,100,49,100,'red','black',10,'y');
bote(50,100,49,100,'pink','black',9,'x');
bote(50,200,49,100,'yellow','black',9,'x');
</script>
</body>
</html>
