How to find the exact position of the mouse on the webpage

user_13379309 0
Viewed 67

I have been trying to develop a drawing application. When I try to plot a point for freehand drawing, the point appears a good 100 or so pixels away from the actual position of the mouse pointer. Is there any way I can get the exact position of the mouse? You can see and run the code below.

const canvasEle = document.getElementById('drawContainer');
const context = canvasEle.getContext('2d');


function setMousePosition (e) {
    var x = e.clientX;
    var y = e.clientY;
    console.log("x coord " + x + " y coord " + y);
    
    changePixelColor(x, y)
}

function changePixelColor (x, y) {
    context.fillRect(x,y,1,1);
}

canvasEle.addEventListener("mousemove", setMousePosition)
canvas {
    border: 1px solid black;
    width: 500px;
    height: 500px;
    position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="drawContainer"></canvas>
</body>
<script src="app.js"></script>
</html>

html5-canvas canvas css html javascript
2 Answers

Try removing height and width from CSS and use the canvas' width and height attributes instead. Another tip to center the mouse on the painted rectangle is to subtract half the size of the rectangle, e.g. context.fillRect(x-0.5,y-0.5,1,1). In your case it's hard to actually see that the dot isn't centered so try with context.fillRect(x-25,y-25,50,50) and you will see a difference compared to context.fillRect(x-25,y,50,50)

const canvasEle = document.getElementById('drawContainer');
const context = canvasEle.getContext('2d');


function setMousePosition (e) {
    var x = e.clientX;
    var y = e.clientY;
    //console.log("x coord " + x + " y coord " + y);
    
    changePixelColor(x, y)
}

function changePixelColor (x, y) {
 context.fillRect(x-0.5,y-0.5,1,1);
 //context.fillRect(x,y,50,50); compare these to see the difference
 //context.fillRect(x-25,y-25,50,50);
}

canvasEle.addEventListener("mousemove", setMousePosition)
canvas {
    border: 1px solid black;
    position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
     <canvas width="500" height="500" id="drawContainer"></canvas>
</body>
<script src="app.js"></script>
</html>

user_78085320

Try like this:

const canvasEle = document.getElementById('drawContainer');
const context = canvasEle.getContext('2d');
const cr = canvasEle.getBoundingClientRect();

function setMousePosition (e) {
    var x = e.clientX - cr.x;
    var y = e.clientY - cr.y;
    console.log("x coord " + x + " y coord " + y);
    
    changePixelColor(x, y)
}

function changePixelColor (x, y) {
    context.fillRect(x,y,1,1);
}

canvasEle.width  = 500;
canvasEle.height = 500;
canvasEle.addEventListener("mousemove", setMousePosition)
canvas {
    border: 1px solid black;
    width: 500px;
    height: 500px;
    position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="drawContainer"></canvas>
</body>
<script src="app.js"></script>
</html>

Two additions to resolve this:

  • offsetting the x and y values in setMousePosition, so that they become relative to the canvas position, rather than to the page.
  • setting the width and height of the canvas element in either JavaScript or the HTML attributes.
user_26872040
Related