Solución:
fillRect
.fillRect es un comando “independiente” que dibuja y llena un rectángulo.
Entonces, si emite múltiples comandos .fillRect con múltiples comandos .fillStyle, cada nuevo rect se completará con el estilo de relleno anterior.
ctx.fillStyle="red";
ctx.fillRect(10,10,10,10); // filled with red
ctx.fillStyle="green";
ctx.fillRect(20,20,10,10); // filled with green
ctx.fillStyle="blue";
ctx.fillRect(30,30,10,10); // filled with blue
rect
.rect es parte de los comandos de ruta del lienzo.
Los comandos de ruta son grupos de dibujos comenzando con beginPath () y continuando hasta que se emita otro beginPath ().
Dentro de cada grupo, solo gana el último comando de estilo.
Por lo tanto, si emite varios comandos .rect y varios comandos .fillStyle dentro de una ruta, solo se usará el último .fillStyle en todos los .rect.
ctx.beginPath(); // path commands must begin with beginPath
ctx.fillStyle="red";
ctx.rect(10,10,10,10); // blue
ctx.fillStyle="green";
ctx.rect(20,20,10,10); // blue
ctx.fillStyle="blue"; // this is the last fillStyle, so it "wins"
ctx.rect(30,30,10,10); // blue
// only 1 fillStyle is allowed per beginPath, so the last blue style fills all
ctx.fill()
Como sé, hay 3 funciones “rect” para lienzo: fillRect, strokeRect y rect.
ctx.rect(0,0,rectWidth,rectHeight); // create some shape, there is nothing on the canvas yet
ctx.stroke(); // draw stroke of the shape
ctx.fill(); // fill the shape
Hay dos atajos:
ctx.strokeRect(0,0,rectWidth,rectHeight); // shortcut to stroke rectangle
ctx.fillRect(0, 0, rectWidth, rectHeight); // shortcut to fill rectangle
Entonces tus fill la invocación podría llenar solo tu forma creada con rect.