How to get your mouse coordinates relative to a canvas?

Code Help HTML/CSS/JS
1

Question: How do I get the coordinates of my mouse from a certain element?

The link to the Repl: here!

Here, this only gets the coordinates of the window.

<script type="text/javascript"> 
        window.addEventListener('mousemove', function (e) {
              document.getElementById("x-value").textContent = e.x
              document.getElementById("y-value").textContent = e.y
        });
    </script>

Could I get the coordinates of

#ui-wrapper {
	position: fixed;
	bottom: top;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	transition: background 1s;
}

…Depending on my mouse’s location?

2

Is your Repl private? I’m getting a 404 error.

By the way, there is a difference between Java and JavaScript. I’ve moved this topic into HTML/CSS/JS.

3

Yes, but you need to calculate the position of the element and then subtract it from the mouse coordinates on the page.

There is a function called getRelativeCoordinates that takes the mouse event and the target element as arguments.

I made a little script to give you some ideas:

<script type="text/javascript">
        function getRelativeCoordinates(event, element) {
            const rect = element.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            return { x, y };
        }

        window.addEventListener('mousemove', function (e) {
            const uiWrapper = document.getElementById("ui-wrapper");
            const coords = getRelativeCoordinates(e, uiWrapper);
            console.log(`X: ${coords.x}, Y: ${coords.y}`);
        });
    </script>
2 Likes
4

The Repl isn’t private.

Thank you for moving it to the dedicated topic! I tried to find JavaScript and couldn’t. Guess I searched the wrong keyterm.

2 Likes
5

Thank you! I’ll try to go off of this.

6

Well, the Repl doesn’t seem to exist on your account.

image
image1426Ă—803 186 KB

You can mark Wind’s post as the solution if it solved your problem.

7

It’s MoreTesting. It’s linked inside my original post.

Edit: Super sorry, I made my other Repl public by mistake “NewTest”. Sorry about that! The MoreTesting should be fixed.

3 Likes
8

That’s strange, the first couple times I clicked the link, I got a 404, now it’s showing up.

1 Like
9

I unfortunately don’t see the purpose of getRelativeCoordinates still. Could you explain this a bit more?

10

The getRelativeCoordinates function is used to calculate the position of the mouse cursor relative to a specific HTML element. (As you can see here: Coordinates)

You kinda were getting the mouse cursor’s coordinates relative to the window but then you asked if you could get the mouse cursor’s coordinates relative to the #ui-wrapper.

The getRelativeCoordinates function takes two arguments:

  1. Event: The mouse event object, which contains information about the mouse cursor’s position.
  2. Element: The HTML element for which you want to calculate the cursor’s relative position.

And, as per the code I wrote before, inside the function you can see I’m calling the getBounding method on the element, this method will return an object containing the size and position of the element, having properties like top, right, bottom and left.
These properties represent the distance from the edges to the viewport.

After that we subtract the “left” and the “top” properties from the clientx and client y. These events represent the horizontal and vertical coordinates of the mouse cursor relative to the viewport.

So, if we subtract the element position from the cursor position, we get the cursor position.
This is what the getRelativeCoordinates function returns: an object containing the “x” and the “y” coordinates of the cursos relative to the given element.

1 Like
11

When you’re passing in e, top left of your screen will always be (0, 0) because that’s the cords in relation to the window. I realized that when attempting to create a version for myself. The new coordinates function is displaying (0, 0) when hovering top left of your screen.

Sorry if this made no sense…

1 Like
12

Actually, you only need to change your e.x and e.y to e.clientXand e.clientY respectively in your original script, since they get the mouse x and y coordinates relative to the viewport of the element being clicked on.

You can look at the examples and explanations in MDN here

1 Like