After cleaning the canvas, the photo will not load if it is the same photo that was there before cleaning

After cleaning the canvas, the photo will not load if it is the same photo that was there before cleaning. But other photos are loaded and displayed. After uploading the other photos, if you try to upload the initial photo again, it is displayed again.

This code you must have seen more than once:

function loadForegroundImage() {
  var imgcanvas = document.getElementById("fgcan"); 
  var fgfile =  document.getElementById("fgfile");
  fgImage = new SimpleImage(fgfile);
  fgImage.drawTo(imgcanvas);  
}

function clearCanvas(name) {
   var imgcanvas = document.getElementById(name);

   const ctx = imgcanvas.getContext("2d");
   ctx.clearRect(0,0,imgcanvas.width,imgcanvas.height);
}

>Solution :

To be able to reload the same image/file as many times as required over and over, ensure your file opener nullifies its value after every successful load, like this…

<input type="file" id="Open" accept="image/*" onchange="OpenFile(this); this.value=null;">

So add a this.value=null; as the last instruction of the onchange event.