I'm trying to draw any amount of images onto a canvas while being able to zoom in/out using the mousewheel event, but when adjusting the canvas scale, sometimes the images overlap and the canvas doesn't clear.

Here I get the canvas, create the starting scale, image, and add the eventlistener when it is loaded:

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, the reDraw() method clears the canvas and draws any number of images (between 10, or so) onto the canvas, while compensating for the positioning of the images:

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)
    }
  }
}

Finally, the MouseWheelHandler() method gets the mousewheel data and adjusts the canvas scale accordingly:

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()
  }
}

My problem is that if I zoom too far out, the canvas isn't getting cleared and the images appear to kind of echo, or layer on top of one another. I've tried doing ctx.clearRect() with numbers larger and smaller than the canvas size, but it still results in overlapping images.

I just want to be able to zoom in/out and have the canvas only display what was drawn after the MouseWheelHandler runs.