Menu
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?
701
Difference between Bezier and Quadratic Curve A cubic Bezier curve has 2 control points, whereas the quadratic Bezier curve only has 1 control point.
Bézier curves have a lot of applications in the areas of science, engineering, and technology such as: railway route or highway modeling, networks, animation, computer-aided design system, robotics, environment design, communications, and many other fields due to their computational simplicity and stability.
The cubic-bezier() functional notation defines a cubic Bézier curve. As these curves are continuous, they are often used to smooth down the start and end of the interpolation and are therefore sometimes called easing functions. A cubic Bézier curve is defined by four points P0, P1, P2, and P3.
Bézier curves are widely used in computer graphics to model smooth curves. As the curve is completely contained in the convex hull of its control points, the points can be graphically displayed and used to manipulate the curve intuitively.
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/
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; padding:20px; } #canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); ctx.lineWidth=8; ctx.lineCap="round"; function baseR(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.beginPath(); ctx.moveTo(30,200); ctx.lineTo(30,50); ctx.lineTo(65,50); ctx.moveTo(30,120); ctx.lineTo(65,120); ctx.lineTo(100,200); ctx.strokeStyle="black"; ctx.stroke() } function quadR(){ ctx.beginPath(); ctx.moveTo(65,50); ctx.quadraticCurveTo(130,85,65,120); ctx.strokeStyle="red"; ctx.stroke(); } function cubicR(){ ctx.beginPath(); ctx.moveTo(65,50); ctx.bezierCurveTo(120,50,120,120,65,120); ctx.strokeStyle="red"; ctx.stroke(); } $("#quad").click(function(){ baseR(); quadR(); //cubicR(); }); $("#cubic").click(function(){ baseR(); cubicR(); }); }); // end $(function(){}); </script> </head> <body> <button id="quad">Use Quadratic curve</button> <button id="cubic">Use Cubic Bezier curve</button><br><br> <canvas id="canvas" width=150 height=225></canvas> </body> </html> I understand this post is rather late. But it seems that some important aspects about quadratic and cubic Bezier curves are still missing. So....
With quadratic Bezier curve, you will never be able to make the two end slopes parallel. But you can achieve that with cubic Bezier curves. Furthermore, cubic Bezier curves allow you to control the two end slopes individually, which is not possible with quadratic Bezier either. However, quadratic Bezier curve will never have inflection points (the point at which the curvature sign changes) while cubic Bezier curve could possibly have inflection points if you are not careful with the control points. So, in a summary, cubic Bezier curve is much more popular than quadratic Bezier curve because of its flexibility. Quadratic Bezier curve (more often, rational quadratic Bezier curves) will be used when monotonic curvature is important.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
