How do I convert mouse click coordinate to canvas coordinates?

[gibran.shah]

Hello,

Please have a look at this jsfiddle: https://jsfiddle.net/pd523fjc/

I am trying to highlight points in the scatter plot based on the user clicking on a point. I was able to create a click listener and get the mouse coordinates. I was also able to get the bounds of the canvas. What I need to do now is convert the mouse click coordinates to canvas coordinates.

For example, if I click near the origin of the chart, where the canvas coordinates are (-50, -200), the mouse click coordinates are (58, 329). Obviously, these are screen coordinates, or div coordinates, which are not the same as the canvas coordinates. So I’m wondering if there’s a way to convert these screen/div coordinates to canvas coordinates.

Thanks for any forthcoming help.

Gibran

[Manoj Mohan]

Gibran,

You need to subtract the offset of the chart container from e.pageX/e.pageY to get the coordinate value of the click with respective to canvas as shown in this documentation page.

—-
Manoj Mohan
Team CanvasJS

[gibran.shah]

Thank you Manoj, that worked!