jambolo / drawArc

Computes the first parameter of the canvas arcTo function given a radius

drawArc

Draws an arc of a given radius between two points

Typically, the HTML canvas arcTo method is used to draw rounded corners and determining the values of the parameters is generally trivial because the first endpoint is simply the corner. However, computing the first endpoint in the case of drawing a generic arc is complicated. The drawArc method does that computation for you.

The Math

Given a starting point, P₁, an endpoint, P₂, and a radius, r, compute a point, Q, such that P₁Q and P₂Q are tangent at P₁ and P₂ to a circle with the given radius with P₂ counter-clockwise from P₁.

API

drawArc(context, x1, y1, x2, y2, radius)

• context - HTML drawing context
• x1, y1 - start of the arc
• x2, y2 - end of the arc
• radius - radius of curvature