Javascript 画布填充反映在两种形状上

创建了2个画布形状

要在两个形状中填充不同的颜色。然而，第二个形状的颜色变化也反映在第一个形状中

这是我的密码

//Drawing 1st triangle color #FFCC000 Triangle
ctx.moveTo(rectX - 100, rectY);
ctx.lineTo(rectX, rectY - 100);
ctx.lineTo(rectX, rectY);
ctx.stroke();
ctx.fillStyle = "#FFCC00";
ctx.fill();

//Drawing  2nd Triangle - color #CC00CC 
    ctx.moveTo(rectX+220, rectY);
    ctx.lineTo(rectX+220, rectY - 100);
    ctx.lineTo(rectX+300, rectY);
    ctx.stroke();
    ctx.fillStyle = "#CC00CC";
    ctx.fill();

如果我只画一个三角形，它会反映出正确的颜色。但是，当显示两个三角形时，它们都采用第二个三角形的颜色#CC00CC

---

如何将不同的颜色应用于这两个对象？？？

您必须使用

closePath

和

beginPath

：

ctx.beginPath();
ctx.moveTo(rectX - 100, rectY);
ctx.lineTo(rectX, rectY - 100);
ctx.lineTo(rectX, rectY);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "#FFCC00";
ctx.fill();

ctx.beginPath();
//Drawing  2nd Traingle - color #CC00CC 
ctx.moveTo(rectX+220, rectY);
ctx.lineTo(rectX+220, rectY - 100);
ctx.lineTo(rectX+300, rectY);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "#CC00CC";
ctx.fill();