缩放变换时，两个紧挨着的矩形之间有一个小间隙

Question

我正在制作一个游戏，其中使用一堆矩形创建了世界。 直到我在变换中引入缩放因子（在矩形之间造成小的间隙）之前，两个世界看起来都不错。

const ctx = c.getContext('2d');

ctx.fillRect(100, 200, 300, 200);
ctx.fillRect(400, 200, 300, 200);

ctx.scale(0.442, 0.442);

ctx.fillStyle = "red";
ctx.fillRect(100, 100, 300, 200);
ctx.fillRect(400, 100, 300, 200);

#c {
  border: 1px solid red;
}

<p>The black rectangle is actually two rectangles right next to each other.</p>
<p>The red rectangle is the same two black rectangles but with a scale factor of 0.442</p>
<p>However, there is a small gap in between the two.</p>
<canvas id="c" width="1000" height="500"></canvas>

我认为这与抗锯齿有关，因为变换后的坐标并不完全对应于像素（它们是浮点数）。

说明：我仅以0.442作为比例因子示例。该修补程序应适用于任何比例因子。另外，由于我的游戏具有移动的相机，因此矩形也应该能够平移。