Mouse Position Javascript Canvas

Question

How can I access the mouse position in the Javascript canvas?
https://code.sololearn.com/WRVTAjIfS88T/?ref=app

Answer 1

You can do it with mouse events.
So, if you have a function with one parameter, that parameter will contain stuff about the mouse:

let MOUSE = {};
window.addEventListener("mousemove", e => {
MOUSE.x = e.clientX;
MOUSE.y = e.clientY;
});

You will have an object MOUSE containing the positions of the mouse.
You can also add something similar to make it work on phones, too:

window.addEventListener("touchmove", e => {
MOUSE.x = e.touches[0].clientX;
MOUSE.y = e.touches[0].clientY;
});

Answer 2

Airree Last thing, the ball won't move despite increasing x and y axis. I am wondering if you can help. Sorry for asking again.

Answer 3

Insecure_Coder 😢 Yikes. If you check the draw function, you are also using the setup function, meaning that you update the speed, then reset it immediately ¯\_(ツ)_/¯