I have the following p5.js code:

let minScale = 1
let maxScale = 5

let targetScale = minScale
let currentScale = targetScale

let idx = 0

function setup() {
  pixelDensity(1)
  createCanvas(windowWidth, windowHeight)
  preload(IMG_PATHS, IMGS)
  frameRate(12)  
}

function draw() { 
  if (currentScale < targetScale) {
    currentScale += 0.01
  } else if (currentScale > targetScale) {
    currentScale -= 0.01
  }
  
  scale(currentScale)
    
  image(IMGS[idx], 0, 0)
  
  idx++
  
  if (idx === IMGS.length) {
    idx = 0
  }  
}

window.addEventListener('click', function() {
  targetScale = targetScale === maxScale ? minScale : maxScale
})

1. When I click I want to zoom-in.
2. When I click again I want to zoom out

Issue

It looks like scale() redraws the canvas without removing the previous ones. The issue is visible when zooming out. You will notice that multiple copies of the image remain on the canvas while zooming out.

Thank you in advance for your help.

You can see the issue here