Холст заполняется на обеих фигурах

Question

создал 2 формы на холсте,

хочу заполнить разные цвета в обеих формах. Однако изменение цвета второй формы отражает и в первой форме.

Вот мой код

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

//Drawing 2nd Traingle - 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(); 

если я рисую только 1 traingle, она отражает правильный цвет. Однако при отображении обеих трайлов оба они принимают цвет 2-го трафинга # CC00CC

Как я могу применять разные цвета для обоих?

Answer 1

Вы должны использовать 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(); 

DEMO