An interactive example of the canvas quadraticCurveTo function

This is a demonstration of how to use the quadraticCurveTo function of the canvas api. A quadratic curve is a type of curve that is available to you with canvas along with the bezierCurveTo function. The example here should help you to understand them because the control points (the coordinates that you give to the quadraticCurveTo function ) are illustrated and you can drag them around with your mouse - showing the effect on the curve. The resulting code is shown below.

This is the code that can be used to achieve the curve (the points are color-coded to match the output above):

The quadraticCurveTo function takes four arguments - ie two sets of XY coordinates. The curve is actually made up of three points - but the first point is the current point in your path. If you're starting a new path with the quadraticCurveTo function then you need to use the moveTo function to move to the start point.

• Start point
  This is the moveTo call in the example above. The curve starts from this point.
  
  
• Control point
  This is the first set of coordinates that you give to the quadraticCurveTo function. This control point dictates the shape of the curve.
  
  
• End point
  This is the second set of coordinates given to the quadraticCurveTo function. This is where the curve ends.