A shape such as a shield can be drawn with a sequence of lines and curves.
Once you create a Path2D you can add straight and curved lines to it.
- You must start with a moveTo
- You can add a straight line use lineTo
- You can add a quadratic curve with quadTo(x1,y1,x2,y2)
- (x2, y2) are the coordinates of the end point of the curve
- (x1, y1) are the coordinates of the control-point - moving the control point alters the gradient at the start and end of the curve.
In this shield we choose a control point so the the line is vertical at the start and at 45 at the end.