变换后无法清除JavaScript帆布

Question

我正在尝试使用Mousewheel事件放大/输入/输入/输出任何数量的图像，但是在调整帆布刻度时，有时图像重叠，而画布则没有清除。

在这里，我得到画布，创建起始尺度，图像并在加载时添加EventListener：

var canvas = document.getElementById("Canvas") // Canvas
var ctx = canvas.getContext("2d") // Context
var scale = 1 // Stored Canvas Scale
var image = new Image() // Random Image
image.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/1200px-Heart_coraz%C3%B3n.svg.png"
image.onload = () => {console.log("Running..."); canvas.addEventListener("mousewheel", MouseWheelHandler)}

Next，Redraw（）方法清除画布，并在画布上绘制任何数量的图像（介于10个，左右），同时补偿图像的定位：

function reDraw() { // Draw Image(s)
  ctx.clearRect(0, 0, canvas.width, canvas.height) // Clear Canvas 
  var maxX = parseInt(Math.random()*10) // Set Max Length
  var maxY = parseInt(Math.random()*10) // Set Max Height
  var size = 32; // Set Image Size
  
  for (var i=0; i<maxX; i++) {
    ctx.drawImage(image, canvas.width/2, canvas.height/2-(size*(maxY-i-1)), size, size)
    for (var c=0; c<maxY; c++) {
      ctx.drawImage(image, canvas.width/2-(size*(maxX-i-1)), canvas.height/2-(size*(maxY-i-1)), size, size)
    }
  }
}

最后，鼠标轮键（）方法获取鼠标轮数据并相应地调整帆布刻度：

function MouseWheelHandler(e) {
  var e = window.event || e;
  var delta = e.wheelDelta || -e.detail
  if (scale+(delta/Math.abs(delta*10)) >= 0.1) { // Prevent zooming out further than 10% of view
    var zoom = (1+(delta/Math.abs(delta*10))) // Set the zoom
    scale += (delta/Math.abs(delta*10)) // Set the scale (No less than 0.1)
    ctx.transform(zoom,0,0,zoom,-(zoom-1)*canvas.width/2,-(zoom-1)*canvas.height/2)
    reDraw()
  }
}

我的问题是，如果我放大了太远，那么帆布就不会清除，图像似乎很友善回声，或彼此顶部。我已经尝试使用CTX.ClearRect（），数字比画布大小更大，但仍导致图像重叠。

我只想能够缩小/输出，并让画布仅显示鼠标WheelHandler运行之后绘制的内容。