An interactive example of the canvas tags bezierCurveTo() function

Written by Richard Heyes, on 29th January 2013

An interactive example of the canvas tags bezierCurveTo() function. You can drag and drop the points and see the effect that it has on both the curve and also on the code.

[No canvas support]

This is a demonstration of how to use the bezierCurveTo() function of the canvas 2D API. A Bezier 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 bezierCurveTo() function) are illustrated and you can also drag them around with your mouse - showing you 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 colour coded to match the output above):


The arguments to the function

The bezierCurveTo() function takes six arguments - ie three sets of X/Y coordinates. 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.