---

previousnext

A quadratic curve can be thought of as a segment of a parabola (with arbitrary orientation). The code below draws such a parabola segment.

ctx.beginPath(); ctx.moveTo(100, 133); ctx.quadraticCurveTo(150, 167, 200, 133); ctx.lineWidth = 4; ctx.strokeStyle = "red"; ctx.stroke(); // ignore the following at first reading if (explain) { ctx.beginPath(); ctx.lineWidth = 1; ctx.moveTo(0, 67); ctx.lineTo(150, 167); ctx.lineTo(300, 67); ctx.strokeStyle = "lightgreen"; ctx.stroke(); }

Explanation

To help you understand how this works, set the variable explain to true in the window and then read the following.

Consider 3 points
A = (x1, y1),
C = (x2, y2), and
B = (x3, y3).

The starting point is A; C is known as the control point and B is the end point. The quadratic curve goes through A and B in such a way that it is tangent at A to the line segment that joins A and C; it is also tangent at B to the line segment that joins B and C.

The syntax to create a quadratic curve is

ctx.moveTo(x1, y1); // or equivalent to get to A ctx.quadraticCurveTo(x2, y2, x3, y3);

Note

A quadratic curve is an example of a Bézier curve. Some interesting animations can be found on that Wikipedia page.

previousnext