Drawing bezier curves with more than 3 control points

Question

I know I can draw a bezier curve with 3 control points using bezierCurveTo(). How can I draw a bezier curve with more than 3 control points ? I tried using spline from KineticJS(since i can specify as many points as I want) but the resulting curve doesn't look like a bezier curve(if, for example, i set only 3 points). Can I somehow connect more quadratic bezier curves together to get a curve with more than 3 control points ?

can you create a jsfiddle (at jsfiddle.net) with some code and I'll try and help you out? — SoluableNonagon

SoluableNonagon SoluableNonagon · Accepted Answer · 2013-01-17T16:09:08

Lets say you have 3 curves:

 curve1, curve2, and curve3

and you want a curve which connects all the curves together, call it:

 curve 4

With kineticJS (4.3.1 at this time), you can do:

 var points1 = curve1.getPoints();
 var points2 = curve2.getPoints();
 var points3 = curve2.getPoints();
 var joined = points1.concat(points2,points3);

 curve4.setPoints(joined);
 // make sure to redraw the layer

Drawing bezier curves with more than 3 control points

1 Answers