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?