Bezier and quadratic curves in HTML5 canvas elements

bezier loopHTML5 canvas elements are used to draw the illustrations on this site.  These elements have a number of methods for drawing shapes and lines.  Lines can be defined using three methods

  • Straight line - drawn by specifying the x and y coordinates for the line starting and ending points.
  • Quadratic curve - drawn by specifying the x and y coordinates for the starting point, ending point and a single control point.  The relationship of the control point to the starting and ending points establishes the curvature of the line.
  • Bezier curve - drawn by specifying the x and y coordinates for the starting point, ending point and two control points.  The second control point provides finer control over the shape of the curve.  It allows more complex shapes to be drawn. Shapes such as s-curves and the loop shown in the image to the left.  

The rabbits and flowers in the genetics* illustrations are rendeted using both quadratic and bezier curves.  

Determining the control points for these curves can be challenging. I've had the idea to write a small interative canvas that would  show the control points of a bezier curve and them to be moved with the mouse in realtime.  As the shape of the curve changed, the coordinates would be reported elsewere on the page.  

Happily, there is no need for me to do this.  This tool already exists for both bezier and quadratic curves.  Each of these interactive tools are linked to an explanation page. The animations on these explanation pages  for the bezier and quadratic curves do a great job illustrating how a line is drawn based on the starting, ending and control points.