Bezier Curves in HTML5

Bezier curves are a set of curves as defined by a beginning point, end point, and a set of inflection points along the way. Wikipedia has a great article on Bezier curves, and even some really nice Bezier curve animations.

In HTML5 Canvas, the functions used to draw Cubic and Quadratic Bezier curves are a little confusing if you are somewhat familiar with these names - but hopefully this little sandbox demo will help you decide which to use.

To start these curves you'll have to use the canvas function ctx.moveTo(p1x, p1y); to set the first point of the line, then use one of the following functions (where the 'h' variables are for the "handles" or inflection points). Drag the handles around and see what the resulting curves look like.

Cubic curve in Red	ctx.bezierCurveTo(h1x, h1y, h2x, h2y, p2x, p2y);
Quadratic curve in Orange	ctx.quadraticCurveTo(h1x, h1y, p2x, p2y);