0

Let's say that I have the following JS code:

function getPositions() {
  document.getElementById("gm").addEventListener("click", () => {
    let data = [event.clientX, event.clientY];
    return data;

  });

}
function completeChecking() {
  let coors = getPositions();
  return coors;
}

And a canvas tag in HTML:

<canvas onmouseover="completeChecking();" id="gm" width="512" height="512"></canvas>

I want to know the coordinates of the user's mouse whenever it hovers over the canvas element. I know that I can set an initiated, or fired variable inside the function, and set it to true whenever the function is called. But I want it to be false whenever the user's mouse is not in the canvas and true when it is.

Is there a way to do this?

Rodion Zuban
  • 11
  • 3
  • Can you explain a bit more exactly what behavior you're looking for or what your end goal is? It's not clear what you mean by having a "`fired` variable inside the function and set it to true whenever the function is called". – jered Sep 23 '20 at 00:00
  • 1
    onmouseleave and onmouseenter seem like the easiest solution, though usually it's better to listen to mouse events from an ancestor and calculate the offset later. – Kaiido Sep 23 '20 at 00:01
  • So by `fired`, look right here: https://stackoverflow.com/questions/11299952/how-to-determine-if-a-function-has-been-called-without-setting-global-variable . For the end goal, I mean, that I want to know the mouse coordinates *only* when the mouse is inside the canvas, not when it's outside of it. I also want to know what called the function (HTML or JS). I hope this explains it more clearly. – Rodion Zuban Sep 23 '20 at 00:03
  • @Kaiido, thanks, this seems to work – Rodion Zuban Sep 23 '20 at 00:09

0 Answers0