javascript - Canvas fill reflects on both the shapes -

have created 2 canvas shape,

want fill different colors in both shape. changing color of 2nd shape reflects in first shape well.

here code

//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(); 

if draw 1 traingle, reflects proper color. when showing both traingle, both of them takes color of 2nd traingle #cc00cc

how can apply diiferent colors both??

you must use 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