Javascript 在画布上重画图像

我正在开发一个绘画游戏，我需要在每一帧的画布上重新绘制一幅图像。问题是每次我重新绘制图像时，图像总是越来越厚。为什么它不画相同的像素

下面是我要说的一个例子，只需点击重画50次，就可以看到不同之处：

函数drawImage（）{
ctx.drawImage（图像，0,0）；
}
函数draw50次（）{
for（设i=0；i<50；i++）{
drawImage（）；
}
}
函数clearCanvas（）{
控制台日志（“清除”）
clearRect（0，0，canvas.width，canvas.height）；
drawImage（）；
}

PS：我不能使用ctx.clearRect，因为我会丢失我的画布的其余部分

在我绘制一次图像后：

在我绘制图像50次后：

---

PNG有半透明像素；当你一次又一次地画它们时，它们就会累积起来，产生那种效果。不过，您需要解决一个不同的问题：修复代码，以便在两者之间使用clearRect。（一个快速而肮脏的修复方法是从PNG中删除所有半透明像素，例如将其转换为只有全白色是透明的；这也应该“修复”问题）您还可以将图像定位在画布上方，这样您可以在画布上绘制任意多的图像，线性艺术将始终显示在顶部；不需要清除或重画任何东西。但我有一个油漆桶工具（洪水填充）。我需要阅读图像像素，使工作，你应该能够做到这两个，即在画布上重画，但显示在顶部的图像；尽管这可能会再次将像素添加到一起；不过，要使用泛光填充，您仍然需要使用别名lineart；当你一次又一次地画它们时，它们就会累积起来，产生那种效果。不过，您需要解决一个不同的问题：修复代码，以便在两者之间使用clearRect。（一个快速而肮脏的修复方法是从PNG中删除所有半透明像素，例如将其转换为只有全白色是透明的；这也应该“修复”问题）您还可以将图像定位在画布上方，这样您可以在画布上绘制任意多的图像，线性艺术将始终显示在顶部；不需要清除或重画任何东西。但我有一个油漆桶工具（洪水填充）。我需要阅读图像像素，使工作，你应该能够做到这两个，即在画布上重画，但显示在顶部的图像；尽管这可能会再次将像素添加到一起；不过，要使用泛光填充，您仍然需要使用别名lineart。

function drawImage(){
  ctx.drawImage(image, 0, 0);
}

function draw50times(){
  for(let i = 0; i < 50; i++){
    drawImage();
  }
}

function clearCanvas(){
  console.log("Clear")
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawImage();
}