将2个画布形状放在一起，没有间隙？

Question

我在HTML Canvas中使用六角形板工作。出于我的应用的目的，每个六边形都有填充颜色，黑色边框和彩色边框（表示谁拥有该特定的十六进制）。选择六边形时，填充变为浅蓝色，邻近的敌人六边形填充变为红色。

我发现无法完美排列黑色边框内的彩色边框，没有任何像素间隙。下面是特写图片。您可以在高亮的六边形的边缘看到填充颜色在彩色边框和黑色边框之间稍微渗出。

你认为这是我如何计算每个六边形的像素位置的函数，还是因为像素是正方形而无法将成角度的形状排列成另一个角形？

下面是我用来创建给定六边形（黑色边框）然后将彩色边框放在其中的代码。

//Main Hex
var numberOfSides = 6,
size = this.radius,
Xcenter = x0 + (this.width / 2),
Ycenter = y0 + (this.height / 2);
this.context.beginPath();
this.context.lineWidth = 1;
this.context.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));          
for (var i = 1; i <= numberOfSides;i += 1) {
    this.context.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
}
if (fillColor && highlight == false) {
    this.context.fillStyle = fillColor;
}
if (highlight == true){
    this.context.fillStyle = highlightColor;
    this.context.globalAlpha=0.65;
}
this.context.fill();
this.context.closePath();
this.context.stroke();

//Inside Colored Hex
var numberOfSides = 6,
size = this.radius-4.75,
Xcenter = x0 + (this.width / 2),
Ycenter = y0 + (this.height / 2);
this.context.strokeStyle = map.data[tile.row][tile.column].color;
this.context.beginPath();
this.context.lineWidth = 6;
this.context.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));          
for (var i = 1; i <= numberOfSides;i += 1) {
    this.context.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
}
this.context.closePath();
this.context.stroke();

除了size和strokeStyle之外，每个代码几乎相同。有什么想法吗？任何解决方法？