How to get the coordinates of a user drawn line in canvas

Question

I understand that you can draw lines using the canvas element. What I want to accomplish, is the user selects 2 points on the canvas. Then, using the 2 points I can calculate the equation of this line. However, I have not been able to figure out how I can access the coordinates property of the dots that a user draws on the canvas. How can I accomplish this?

Answer 1

If the user needs to click to select the points, you want to look into addEventListnener and the MouseEvent object that is passed into the event handler that you register.

For example:

canvasElement.addEventListener("click", function(event /* MouseEvent */) {
  // now event.clientX and event.clientY have mouse coordinates
});