在转换和缩放 Javascript Canvas 后 fillRect 周围出现奇怪的边框

Question

我使用 html canvas 制作了一个简单的像素艺术编辑器，但在实现放大和缩小功能时遇到了问题。在我将画布平移并缩放到鼠标位置后，我看到 fillRects 周围有一些边框。我认为这是因为 fillRects 被重新绘制成不同的尺寸，但我不明白这怎么可能。似乎问题在于比例因子是一个浮点数，但我看不出如何解决这个问题。

这是没有放大的样子，一切看起来都很正常：

但是在我稍微缩放画布之后，这些线出现在 fillRects 周围：

我在这里创建了一个具有基本功能的代码笔来演示问题，在那里更容易看到：https://codepen.io/seila7777/pen/JjmPrEJ

放大和缩小功能的 ideia 来自 stackoverflow 答案，我对其进行了更改以满足我的需要。但基本上它是这样工作的：

matrix[0] = currentScale;
matrix[1] = 0;
matrix[2] = 0;
matrix[3] = currentScale;
matrix[4] = originX;
matrix[5] = originY;

ctx.clearRect(0, 0, 500, 500);
ctx.setTransform(1, 0, 0, 1, 0, 0);

ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);

其中 originX 和 originY 是鼠标的位置。在 mousemove 事件侦听器中，我像这样设置变量（SCALE_FACTOR 是 1.1）：

currentScale *= SCALE_FACTOR;
originX = mousex - (mousex - originX) * SCALE_FACTOR;
originY = mousey - (mousey - originY) * SCALE_FACTOR;

如果放大，和

currentScale *= 1 / SCALE_FACTOR;
originX = mousex - (mousex - originX) * (1 / SCALE_FACTOR);
originY = mousey - (mousey - originY) * (1 / SCALE_FACTOR);

如果缩小。

如果有人帮助我解决这个问题，我将不胜感激。我花了一整天试图找出问题所在。