HTML canvas (Draw with Mouse) mouse cursor point mismatch

I want to use Draw with Mouse on the canvas. The code is as follows:

// Stores the initial position of the cursor
let coord = {x:0 , y:0}; 

// // set a flag
let paint = false;
// Updates the coordianates of the cursor when an event e is triggered 
function getPosition(event){
  coord.x = event.clientX - canvas.offsetLeft;
  coord.y = event.clientY - canvas.offsetTop;
}
  
// The following functions toggle the flag to start and stop drawing
function startPainting(event){
    if (mouseID.checked){
    myCanvas.style.cursor = "url('/paint.cur'),auto"
    paint = true;
    getPosition(event);
    }
}

function stopPainting(){
  paint = false;
}
    
function sketch(event){
  if (!paint) return;
  ctx.beginPath();
    
  ctx.lineWidth = mouseline.value;
   
  // set to a round shape.
  ctx.lineCap = "round";
    
  ctx.strokeStyle = bcolor.value;
      
  // The cursor to start drawing
  ctx.moveTo(coord.x, coord.y);
   
  // The position of the cursor gets updated when move the mouse around.
  getPosition(event);
   
  ctx.lineTo(coord.x , coord.y);
    
  // Draws the line.
  ctx.stroke();
}

The problem is when I run it on my desktop the mouse is fine but on another computer, the mouse gets a mismatched position with the drawing. Can anyone help me with the issue?