While drawing on a HTML5 canvas using mouse, mouse position is not correctly positioned

Question

canvas actual height,width is bigger than style height, width.

What calculations that needs to be considered when finding proper mouse position in this case. Current code for mouse position is

function getMousePos(canvas, evt) {
        let ancestor = document.getElementById('viewer')
        var offsetAncestor = ancestor.getBoundingClientRect();

        var rect = canvas.getBoundingClientRect(), // abs. size of element
            scaleX = canvas.width / rect.width,    // relationship bitmap vs. element for X
            scaleY = canvas.height / rect.height;  // relationship bitmap vs. element for Y

        // return {
        //   x: (evt.clientX - rect.left) * scaleX,   // scale mouse coordinates after they have
        //   y: (evt.clientY - rect.top) * scaleY     // been adjusted to be relative to element
        // }
        return {
            x: (evt.clientX - (rect.left - offsetAncestor.left)),   // scale mouse coordinates after they have
            y: (evt.clientY - (rect.top + offsetAncestor.top))     // been adjusted to be relative to element
        }
    }

user_3877726 · Answer

Element.getBoundingClientRect is an absolute coordinate relative to the viewport. You don not need to use the coordinates of the container eg ancestor.getBoundingClientRect(); is not required.

Example converting mouse event client coords to canvas pixel coords. (assuming Window.devicePixelRatio === 1)

const ctx = canvas.getContext("2d");
ctx.lineWidth = 10;
var x, y;
addEventListener("mousemove", mouseMove);
function mouseMove(e) {
    const canRect = canvas.getBoundingClientRect(); 
    const scaleX = canvas.width / canRect.width;  
    const scaleY = canvas.height / canRect.height; 
    const xx = (e.clientX - canRect.left) * scaleX;
    const yy = (e.clientY - canRect.top) * scaleY;
    
    if (x !== undefined) {
        ctx.beginPath();
        ctx.lineTo(x, y);
        ctx.lineTo(xx, yy);
        ctx.stroke();
    }
    x = xx;
    y = yy;
}

canvas {
    height: 150px; 
    width: 300px;
    border: 1px solid black;
}
#viewer {
   position: absolute;
   top: 40px;
   left: 100px;
}

Move mouse over canvas.

While drawing on a HTML5 canvas using mouse, mouse position is not correctly positioned

1 Answers