如何防止画布上图像的像素化？

Question

我有一个奇怪的例子，在清理画布并重绘图像几次(通常在6-10次清理/重绘之间)后，画布上的图像会被像素化。

相关代码如下：

JS清理画布：

ctx.clearRect(0, 0, c.width, c.height);

JS添加新镜像：

var blobImage = new Image();
blobImage.src = 'blob.png';
blobImage.onload = function() {
    ctx.drawImage(blobImage, x, y);
}

HTML (为了完整性)：

<canvas id="myCanvas" width="600px" height="800px"></canvas>

因此，目前，在任何时间点，屏幕上最多有8个斑点。当这个数字发生变化(向下变为1)时，每次更改时，我都会用较少的一个斑点重新绘制画布。

这是斑点最初的样子：

然后，在所述(可变)重绘量之后，它们开始看起来像：

​

也会发生轻微的裁剪。

我没有使用任何外部库，只使用标准的html和js。我甚至不知道如何开始故障排除，所以任何建议都是非常感谢的！

Answer 1

只需将宽度更改为800px，它就可以工作：

<canvas id="myCanvas" width="800px" height="800px"></canvas>

或将高度更改为600px

<canvas id="myCanvas" width="600px" height="600px"></canvas>