javascript - Why does CSS centering mess up canvas mouse coordinates?

Question

I'm making a simple HTML5 canvas drawing app for fun.

In my code, whenever I center the canvas with

margin: auto;

or

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

the mouse coordinates are shifted, and that shift, or offset, seems to be reliant upon on the size of the window.

Why are the mouse coordinates shifted?

Is there any way to prevent this, while still getting the same effect?

Answer 1

They are indeed shifting as mouse coordinates are relative to client window not the canvas element itself.

I suspect you are using the clientX/Y as-is without compensating for this.

Example: correcting mouse positions

function getXY(canvas, event) {
    var rect = canvas.getBoundingClientRect();  // absolute position of canvas
    return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    }
}

Now simply call this function each time you need the mouse position:

function onmousemove(e) {
    var pos = getXY(canvas, e);
    console.log(pos.x, pos.y);
}

This will provide adjusted position. Notice it does not compensate for border or padding if you use that - in those cases, wrap canvas in a parent div and apply border/padding to that div instead.