Gap при рисовании многоугольника на холсте

Question

Я использую следующий рисовать многоугольники на HTML-холсте:

var canvas = document.getElementById("mycanvas"); 
var ctx = canvas.getContext("2d"); 

var numberOfSides = 6, 
    size = 20, 
    Xcenter = 25, 
    Ycenter = 25; 

ctx.beginPath(); 
ctx.moveTo (Xcenter + size * Math.cos(0), Ycenter + size * Math.sin(0));   

for (var i = 1; i <= numberOfSides;i += 1) { 
    ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI/numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI/numberOfSides)); 
} 

ctx.strokeStyle = "#000000"; 
ctx.lineWidth = 10; 
ctx.stroke(); 

К сожалению, это оставляет разрыв в конце полигона. Любая идея, как это исправить?

Jsfiddle here

Answer 1

Вместо того чтобы рисовать на все 6 очков, только притягивать к первым 5, а затем вызвать ctx.closePath();

http://jsfiddle.net/757mavjb/2/

var canvas = document.getElementById("mycanvas"); 
var ctx = canvas.getContext("2d"); 

var numberOfSides = 6, 
    size = 20, 
    Xcenter = 25, 
    Ycenter = 25; 

ctx.beginPath(); 
ctx.moveTo (Xcenter + size * Math.cos(0), Ycenter + size * Math.sin(0));   

for (var i = 1; i < numberOfSides;i += 1) { 
    ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI/numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI/numberOfSides)); 
} 
ctx.closePath(); 

ctx.strokeStyle = "#000000"; 
ctx.lineWidth = 10; 
ctx.stroke(); 

(Примечание: изменение от i <= numberOfSides до i < numberOfSides)

Answer 2

Попробуйте нарисовать еще одну сторону для того, чтобы заполнить этот пробел:

for (var i = 1; i <= numberOfSides+1;i += 1) { 
    ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI/numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI/numberOfSides)); 
}