Getting the Exact Mouse Position

Following up on a thread we left unexplored a few moments ago, the clientX and clientY properties don’t give you the exact mouse position in many situations. Understanding the details of why is something that I cover in this article, but the gist of it is that the clientX and clientY properties don’t account for your canvas element physically being pushed around by all of its ancestors. A margin or padding here and there can cause your positioning inside the canvas element to go out-of-sync. It’s really quite sad.

The solution is to pair up your clientX and clientY properties with the following code (taken from the Get an Element’s Position Using JavaScript article) that takes into account all of the various position-related shenanigans that your canvas might be affected by: