I am building a web app for my ML model in which i need to mark the area with the mouse pointer where there is occlusion in the image. The ML model then takes the marked image and reconstructs the missing regions.
In order to draw over the image, first i made a Canvas and on to that canvas we need to upload the selected image. Then i made the canvas to take the size of the resized image.
The problem here is: The mouse points to the one location but draws on the other location.
Further more I figured out that, when i vary the Webpage window size then at some window shape the mouse pointer exactly draws where I want to.
I am not understanding what’s happened? Is it due to the error in window resizing or what ?

**
“””Resizing the Canvas”””**

function overlayImage() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var rect = canvas.getBoundingClientRect();
   
    var img = this; 

    var scaleX = canvas.width / img.width;
    var scaleY = canvas.height / img.height;
    var scale = Math.min(scaleX, scaleY); 
    
    var newWidth = img.width * scale;
    var newHeight = img.height * scale;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    canvas.width = newWidth;
    canvas.height = newHeight;
    
    ctx.drawImage(img, 0,0, newWidth, newHeight); 
}

**'''Now the Mouse Events'''**

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
var rect = canvas.getBoundingClientRect();
let coord = { 
  x: 0,
  y: 0 
};

document.addEventListener("mousedown", start);
document.addEventListener("mouseup", stop);
window.addEventListener("resize", resize);

function resize() {
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
}
resize();

function reposition(event) {
  coord.x = (event.clientX  - rect.left) / (rect.right - rect.left) * canvas.width;
  coord.y = (event.clientY  - rect.top) / (rect.bottom - rect.top) * canvas.height;
}
function start(event) {
  document.addEventListener("mousemove", draw);
  console.log("To check if mouse event is occurring")
  reposition(event);
}
function stop() {
  document.removeEventListener("mousemove", draw);
}
function draw(event) {
  ctx.beginPath();
  ctx.lineWidth = 5;
  ctx.lineCap = "round";
  ctx.strokeStyle = "black";
  ctx.moveTo(coord.x, coord.y);
  reposition(event);
  ctx.lineTo(coord.x, coord.y);
  ctx.stroke();
}

I tried to correct the offset values of x,y but still it did not worked.
I then checked if I don’t resize the canvas size then may be it would help but still not worked.

There are solutions present in stack overflow for the static canvas size but my Canvas size changes according to the image dimension with the aspect ratio balanced. That’s why I can draw properly over some image while the drawing starts far away from where i pointed.