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

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个blob。当这个数字发生变化（向下变为1）时，每次更改时我都会用少一个blob重绘画布。

这是blob最初的样子：

然后，在所述（可变）数量的重绘之后，它们开始看起来像：

也会发生轻微剪辑。

我没有使用任何外部库，只使用标准html和js。我甚至不知道如何开始故障排除，所以任何建议都表示赞赏！

Answer 1

只需将宽度更改为800px就可以了：

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

或将hight更改为600px

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