HTML and CSS Reference

In-Depth Information

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);