Search code examples
javajavascriptgwtcanvas

How to calc the radius for arcTo() with 3 given points?

I have 2 Points connected by a line, start and end point.

I want to draw an arc between them, but the radius should be dynamic depending on where the user clicks. Thus I have a 3rd point from the mouse, with XY coordinate.

How can I draw an ctx.arcTo() so that the resulting line crosses a specific point (the mouse point)?

Solution

  • Update: this answer is actually incorrect, please ignore it. The centre of the arc's circle will not necessarily be at the midpoint between A and B.

    Let's say the two points are A and B, and the user dynamically provides point C.

    Find the midpoint between A and B. This will be the centre of the circle. A line from the centre to point C will be the radius of your arc.

    Calculate the coordinates of the midpoint between A and B (the centre of the circle).

    Calculate the distance between point C and this centre point. This is the radius.