An interactive example of the canvas quadraticCurveTo() function
Written by Richard Heyes, on 29th January 2013An interactive example of the HTML5 canvas quadraticCurveTo() function. This will help you to understand the function by showing you exactly what it's doing and the resulting code.
This is a demonstration of how to use the quadraticCurveTo()
function of the canvas 2D API. A quadratic curve is a
type of curve which is available to you via the function built into the canvas API. 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.
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 quadraticCurveTo()
function takes four arguments  ie two sets of X/Y
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 themoveTo()
call in the example above. The quadratic curve starts from this point.

Control point
This is the first set of coordinates that you give to thequadraticCurveTo()
function. This control point dictates the shape of the curve.

End point
This is the second set of coordinates given to thequadraticCurveTo()
function. This is where the curve ends.