Html 5画布避免重叠时的填充行为

Question

正如你在上面的图片中看到的，我的等距方块之间有明显的线条，这是由每个方格相互重叠引起的。现在重叠是不可避免的，因为我用它绘制的坐标系统（而且我不想改变它）。

这是用于绘制正方形的代码

cRenderContext.beginPath();

cRenderContext.moveTo(iPosX, iPosY);
cRenderContext.lineTo(iPosX + iTileWidthIncrement, iPosY - iTileHeightIncrement);
cRenderContext.lineTo(iPosX + iTileWidth, iPosY);
cRenderContext.lineTo(iPosX + iTileWidthIncrement, iPosY + iTileHeightIncrement);
cRenderContext.lineTo(iPosX, iPosY);

cRenderContext.fillStyle = "rgba(1, 0, 1, 1)";
cRenderContext.fill();
cRenderContext.closePath();

我想要实现的是绘制没有任何可见轮廓的方块，所以基本上有一种方法可以停止填充当前重叠的内容吗？

编辑：我会提到每个方块都是用略微不同的颜色绘制的，所以我不能用一种颜色填充整个区域并完成（它只是看起来全黑，但每种颜色在红色或蓝色通道）

Answer 1

比较一下：

http://jsfiddle.net/HmVtz/

有了这个：

http://jsfiddle.net/HmVtz/1/

看到区别？

代码的不同之处在于我正在使用半像素而不是像素。画布很奇怪。有时读取抗锯齿/子像素渲染。

有关原因的简单解释，请参阅Askup Markup here。