Html Question posted in
Some basic documentation can be found here.

Html – How can I get my window offset not effect my desired cursor position using native JavaScript?

Currently, I just have a simple canvas created, and whenever I move my cursor somewhere on said canvas, two lines get created passing from their respective side of the canvas through the mouse and to the other side.

This works perfectly fine, however, if I scroll my page whatsoever, the numbers are off and the horizontal line no longer passes through the mouse. The "x" and "y" coordinates also remain the same.

Simple explanation: If I move the mouse to (175, 360) on the canvas and then scroll down, and then move the mouse again, the horizontal line does not pass through the mouse but the coordinate numbers still say (175, 360) even though the mouse is somewhere else.

Question: How can I fix my coordinates so that the page’s offset doesn’t mess with the numbers?

Note: If you are just reading this and not the code, that’s fine, but I’ve already tried doing clientRect() and offsets (or at least, I tried what I know, I’m not familiar with them). So please don’t offer those solutions without looking at the code unless you are absolutely sure.

const canvas = document.querySelector('#canvas');
const context = canvas.getContext("2d");
const xCoordinate = document.querySelector('#x-coordinate');
const yCoordinate = document.querySelector('#y-coordinate');

canvas.width = 1024;
canvas.height = 550;

function drawLines(x, y) {
    //From top down
    context.beginPath();
    context.moveTo(x, 0);
    context.lineTo(x, canvas.height);
    context.stroke();

    //From left to right
    context.beginPath();
    context.moveTo(0, y);
    context.lineTo(canvas.width, y);
    context.stroke();
}

function removeLines(x, y) {
    //Clears top left as you move
    context.clearRect(0, 0, x, y);
    //Clears top right as you move
    context.clearRect(x + 1, 0, canvas.width, y);
    //Clears bottom left as you move
    context.clearRect(0, y + 1, x, canvas.height);
    //Clears bottom right as you move
    context.clearRect(x + 1, y + 1, canvas.width, canvas.height);
}

context.canvas.addEventListener('mousemove', function(event) {
    let mouseX = event.clientX - context.canvas.offsetLeft;
    let mouseY = event.clientY - context.canvas.offsetTop;

    //let mouseX = event.x - canvas.offsetLeft;
    //let mouseY = event.y - canvas.offsetTop;

    xCoordinate.innerHTML = mouseX;
    yCoordinate.innerHTML = mouseY;

    drawLines(mouseX, mouseY);
    removeLines(mouseX, mouseY);
})
#canvas {
    border: solid black 1px;
}

p {
    font-size: 14pt;
    font-weight: 600;
}
<!DOCTYPE html>
<html lang="en">

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport", content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Christian Davis">
        <link rel="stylesheet" href="styles.css">

        <title>Mouse Coordinates On A Canvas</title>
    </head>

    <body>
        <p>(<span id="x-coordinate">0</span>, <span id="y-coordinate">0</span>)</p>
        <canvas id="canvas" style="width: 1024px; height: 550px;"></canvas>

        <script src="app.js"></script>
    </body>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Wow, I'm sooooo smart. I've used this method before and forgot about it. After doing a few searches in Google and head banging, I remembered window.scrollY. So I did a few different combinations in my code until it worked and I got this to work.

    const canvas = document.querySelector('#canvas');
const context = canvas.getContext("2d");
const xCoordinate = document.querySelector('#x-coordinate');
const yCoordinate = document.querySelector('#y-coordinate');

canvas.width = 1024;
canvas.height = 550;

function drawLines(x, y) {
    //From top down
    context.beginPath();
    context.moveTo(x, 0);
    context.lineTo(x, canvas.height);
    context.stroke();

    //From left to right
    context.beginPath();
    context.moveTo(0, y);
    context.lineTo(canvas.width, y);
    context.stroke();
}

function removeLines(x, y) {
    //Clears top left as you move
    context.clearRect(0, 0, x, y);
    //Clears top right as you move
    context.clearRect(x + 1, 0, canvas.width, y);
    //Clears bottom left as you move
    context.clearRect(0, y + 1, x, canvas.height);
    //Clears bottom right as you move
    context.clearRect(x + 1, y + 1, canvas.width, canvas.height);
}

context.canvas.addEventListener('mousemove', function(event) {
    let mouseX = event.clientX - context.canvas.offsetLeft;
    let mouseY = event.y + window.scrollY - context.canvas.offsetTop

    xCoordinate.innerHTML = mouseX;
    yCoordinate.innerHTML = mouseY;

    drawLines(mouseX, mouseY);
    removeLines(mouseX, mouseY);
})
    #canvas {
    border: solid black 1px;
}

p {
    font-size: 14pt;
    font-weight: 600;
}
    <!DOCTYPE html>
<html lang="en">

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport", content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Christian Davis">
        <link rel="stylesheet" href="styles.css">

        <title>Mouse Coordinates On A Canvas</title>
    </head>

    <body>
        <p>(<span id="x-coordinate">0</span>, <span id="y-coordinate">0</span>)</p>
        <canvas id="canvas" style="width: 1024px; height: 550px;"></canvas>

        <script src="app.js"></script>
    </body>
</html>


  2. 0

    Use event.pageX and event.pageY for the position relative to the document

    See the docs for more information
    https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search