Estoy tratando de dibujar cualquier cantidad de imágenes en un lienzo mientras puedo acercar/alejar usando el evento de la rueda del mousewheel , pero cuando ajusto la escala del lienzo, a veces las imágenes se superponen y el lienzo no se borra.

Aquí obtengo el lienzo, creo la escala inicial, la imagen y agrego el detector de eventos cuando se carga:

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

A continuación, el método reDraw() limpia el lienzo y dibuja cualquier cantidad de imágenes (entre 10 o más) en el lienzo, mientras compensa el posicionamiento de las imágenes:

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

Finalmente, el método MouseWheelHandler() obtiene los datos de la rueda del mouse y ajusta la escala del lienzo en consecuencia:

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

Mi problema es que si alejo demasiado el zoom, el lienzo no se limpia y las imágenes parecen hacer eco o superponerse unas a otras. Intenté hacer ctx.clearRect() con números más grandes y más pequeños que el tamaño del lienzo, pero todavía da como resultado imágenes superpuestas.

Solo quiero poder acercar/alejar y hacer que el lienzo solo muestre lo que se dibujó después de que se ejecuta MouseWheelHandler .