获取画布在画布上的鼠标位置

Question

** Read before you mark as duplicate! **

Getting the mouse position on the canvas nearly works fine.

My window size is 800 x 600

My canvas size is 400 x 300 :

canvas.width = 400;
canvas.height = 300;

My canvas css size is 100% x 100% :

canvas {width: 100vw; height: 100vh;}

The problem is: if my mouse is in the middle of the canvas I get this mouse position: 400, 300 . If my window size was 1600 x 1200 I would get 800, 600 .

I would like to get the canvas position of the mouse. What I mean by this, is I'm looking to get 200, 150 , regardless of the window size.

How would I do this? Thank's for the help.

Answer 1

You have to create conversion from model coordinates to screen coordinates and back. Here is good explanation for it: http://www.ckollars.org/canvas-two-coordinate-scales.html

Answer 2

You could paste this into your code.

document.getElementById("canvasId").addEventListener('mousemove',function(event){mousePos(event);});
function getMousePos(e){
    var rect = canvas.getBoundingClientRect();
    //this gets your canvas size.
    return {
        x: Math.round(e.clientX - rect.left),
        y: Math.round(e.clientY - rect.top)
    };
function mousePos(e){
    var pos = getMousePos(e);
    var mouseX = pos.x;
    var mouseY = pos.y;
}

then you could just reference the mouseX and mouseY somewhere else.

//enter the rest of your code here.