Почему canvas fill() не рисует форму с цветом, указанным в fillStyle?

Question

Почему не c.fillStyle цвет треугольника?

var c= document.getElementById('myCanvas').getContext('2d'); 

//c.fillRect(20,10,250,175);// 

c.moveTo(225,75); 
c.lineTo(112.5,225); 

c.moveTo(112.5,225); 
c.lineTo(337.5,225); 

c.moveTo(337.5,225); 
c.lineTo(225,75); 

c.strokeStyle= '#9e9e9e'; 
c.stroke(); 

c.fillStyle= '#ffc061'; 
c.fill(); 

Answer 1

Потому что вызывать метод moveTo после lineTo разрывает область заполнения, прыгая в текущее положение. Поэтому вы можете решить эту проблему, удалив методы moveTo, например.

c.moveTo(225,75); 
c.lineTo(112.5,225); 
c.lineTo(337.5,225); 
c.closePath(); 

c.strokeStyle= '#9e9e9e'; 
c.stroke(); 

c.fillStyle= '#ffc061'; 
c.fill();