奇怪的HTML 5 Canvas Antialiasing

我一直在玩canvas元素,并发现当我尝试将NxN均匀的纯色单元格彼此相邻绘制时,在某些宽度/高度配置中,它们之间存在模糊的白色线条.

例如,这个画布应该看起来是黑色但包含某种网格,我猜想它是浏览器中错误的抗锯齿的结果.

可以说,这个bug只出现在某些配置中,但我想彻底摆脱它.有没有办法绕过这个？你有没有在画布抗锯齿的问题？

我做了这个小提琴演示了这个问题,并允许你玩画布的尺寸和细胞数量.它还包含我用来绘制单元格的代码,以便您可以检查它并告诉我是否做错了什么.

var ctx = canvas.getContext('2d');  
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
for (var i = 0; i < numberOfCells; ++i) {
    for (var j = 0; j < numberOfCells; ++j) {
    ctx.fillStyle = '#000';
    ctx.fillRect(j * cellWidth, i * cellHeight, cellWidth, cellHeight);
  }
}

提前致谢,

切赫.