An interactive example of the bezierCurveTo function
Written by Richard Heyes, RGraph author, on 16th January 2013
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 themoveTo
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 thebezierCurveTo
function. This point dictates the shape of the curve.
-
Control point 2
This is the second set of coordinates that you give to thebezierCurveTo
function. This point dictates the shape of the curve.
-
End point
This is the third set of coordinates given to thebezierCurveTo
function. This is where the curve ends.