Dynamic graphics - HTML5 and CSS3 - page 81

You don't have to restrict yourself to straight lines in paths. Instead of
lineTo , you can use either of two types of curve: quadratic or Bézier.
Let's replace the first straight line with a
Bézier curve. Instead of
ctx.moveTo(5,50);
ctx.lineTo(105,150);
use the lines
ctx.moveTo(5,50);
ctx.bezierCurveTo(0,90, 120,70,
105,150)
The last pair of numbers is the end point.
Preceding that are coordinates for the
two control points.
To simplify things the circle has been removed for now, but the sides of
the triangle have also been made curvy, this time with a quadratic
curve. A quadratic curve is similar, but only needs one control point.
This is the code that drew the triangle, using quadraticCurve instead of
lineTo . Here's the original triangle drawing code:
ctx.moveTo(265,50);
ctx.lineTo(315,150);
ctx.lineTo(215,150);
ctx.lineTo(265,50);
Replace it with this:
ctx.moveTo(265,50);
ctx.quadraticCurveTo(315,50, 315,150);
ctx.quadraticCurveTo(265,50, 215,150);
ctx.quadraticCurveTo(215,0, 265,50);