Нужно получить координаты относительно блока canvas
, а не от самой области просмотра
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
canvas.style.width = canvas.offsetWidth +'px';
canvas.style.height = canvas.offsetHeight +'px';
let canvasWidth = canvas.width = canvas.offsetWidth * 2;
let canvasHeight = canvas.height = canvas.offsetHeight * 2;
canvas.addEventListener('mousemove', (e) => {
document.querySelector('.title').innerHTML = `X: ${e.clientX}, Y: ${e.clientY}`;
});
#canvas {
width: 200px;
height: 100px;
border: 1px solid #000;
margin: 20px;
}
<canvas id="canvas"></canvas>
<div class="title"></div>
e.pageX - canvas.offsetLeft