I have been playing around with canvas recently and have been drawing several shapes (tear drops, flower petals, clouds, rocks) using methods associated with these curves. With that said, I can't seem to figure out the difference between the use cases of these different curves.
I know the cubic bezier has 2 control points, a start point, and an endpoint where as quadratic bezier has a single control point, a start point and an endpoint. However, when drawing shapes, I can't seem to easily decide which one to use or when to use them in conjunction.
How do I know which type of curve to use at different points of drawing a shape?
Best Answer
As you've discovered, both Quadratic curves and Cubic Bezier curves just connect 2 points with a curve.
Since the Cubic curve has more control points, it is more flexible in the path it takes between those 2 points.
For example, let’s say you want to draw this letter “R”:
Start drawing with the “non-curvey” parts of the R:
Now try drawing the curve with a quadratic curve.
Notice the quadratic curve is more “pointy” than what we desire.
That’s because we only have 1 control point to define quadratic curviness.
Now try drawing the curve with a cubic bezier curve.
The cubic bezier curve is more nicely rounded than the quadratic curve.
That’s because we have 2 control points to define cubic curviness.
So...more control points gives more control over "curviness"
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/JpXZW/