context.stroke() & context.fill = multi rewrite

[Nours312]

When I do more than one rect or path, all previous forms are re-write with new style definition :

// red rectangle
ctx.fillStyle = "rgba(255, 0, 0, 0.3)";
ctx.strokeStyle = "rgba(255, 0, 0, 1)";
ctx.rect(x1, y1, w1, h1);
ctx.stroke();
ctx.fill();

// green rectangle
ctx.fillStyle = "rgba(0, 255, 0, 0.3)";
ctx.strokeStyle = "rgba(0, 255, 0, 1)";
ctx.rect(x2, y2, w2, h2);
ctx.stroke();
ctx.fill();

the result is : in first, the red rectangle is drawed, and after one green rectangle overload the first red and a second is drawed.

to obtain a good result I need to use fillRec and strokeRec like this :

// red rectangle
ctx.fillStyle = "rgba(255, 0, 0, 0.3)";
ctx.strokeStyle = "rgba(255, 0, 0, 1)";
ctx.fillRect(x1, y1, w1, h1);
ctx.strokeRect(x1, y1, w1, h1);

// green rectangle
ctx.fillStyle = "rgba(0, 255, 0, 0.3)";
ctx.strokeStyle = "rgba(0, 255, 0, 1)";
ctx.fillRect(x2, y2, w2, h2);
ctx.strokeRect(x2, y2, w2, h2);

same issue with path, arc and other draw function who need fill and stroke, all path are re drawed all times with last defined styles.

[iddan]

Thank you for the extensive report. Can you provide a codesandbox with the expected behaviour? PRs are welcome.

[nora-soderlund]

Not a bug. This is how CanvasRenderingContext2D is logically meant to work. What you should've done is used paths, e.g.:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.beginPath();
context.fillStyle = "rgba(255, 0, 0, 0.3)";
context.strokeStyle = "rgba(255, 0, 0, 1)";
context.rect(0, 0, 50, 50);
context.stroke();
context.fill();
context.closePath();

// green rectangle
context.beginPath();
context.fillStyle = "rgba(0, 255, 0, 0.3)";
context.strokeStyle = "rgba(0, 255, 0, 1)";
context.rect(25, 25, 50, 50);
context.stroke();
context.fill();
context.closePath();

Suggest we close this issue.