HTML5 Canvas缩放时出现像素间异常白线问题

我正在使用HTML5 Canvas处理单个像素，该Canvas支持缩放与拖拽功能，每个像素以矩形形式呈现，核心实现代码如下：

pixels.forEach(p => {
    context.fillStyle = p.color;
    context.fillRect(toScreenX(p.x), toScreenY(p.y), 1*scale, 1*scale);
});

其中toScreenX和toScreenY方法会根据像素位置、当前缩放比例及偏移量计算矩形的屏幕位置。

• 当缩放比例为1时，显示一切正常（无缩放状态）
• 放大后，像素间开始出现细白线，画面出现失真（缩放后异常状态）
• 存在相关效果演示视频

我曾尝试用context.putImageData替代fillRect，但处理单个像素时性能极差。

内容的提问来源于stack exchange，提问作者dnnagy