HTML and CSS Reference
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
use the lines
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:
Replace it with this: