An interactive example of the bezierCurveTo function

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

The output

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

The arguments to the function

The bezierCurveTo function takes six arguments - ie three sets of XY coordinate pairs. The curve is actually made up of four points - but the first point is the current point in your path. If you're starting a new path with the bezierCurveTo 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 bezier curve starts from this point.
  
  
• Control point 1
  This is the first set of coordinates that you give to the bezierCurveTo function. This point dictates the shape of the curve.
  
  
• Control point 2
  This is the second set of coordinates that you give to the bezierCurveTo function. This point dictates the shape of the curve.
  
  
• End point
  This is the third set of coordinates given to the bezierCurveTo function. This is where the curve ends.