What is the difference between cubic bezier and quadratic bezier and their use cases?

Question

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?

[Wikipedia summary.](http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_B.C3.A9zier_curves) Basically it has to do with what you want your curves to look like. Quadratic curves are conic sections. — Pointy, Sep 15 '13 at 15:34
From the name of the function, it wasn't immediately obvious to me `bezierCurveTo()` is assumed to be cubic. I came here searching for the difference between `quadraticCurveTo()` and `bezierCurveTo()` :-) — PJ Brunet, Apr 15 '20 at 04:07

score 82 · Accepted Answer · answered Sep 15 '13 at 17:35

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”:

enter image description here

Start drawing with the “non-curvey” parts of the R:

enter image description here

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.

enter image description here

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.

enter image description here

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>

Thank you, accepted. Is there any reason to use the quadratic curve then if the cubic offers more flexibility? — Conqueror, Sep 15 '13 at 17:37
The quadratic curve is mathematically simpler than the Bezier curve and is therefore more efficient for canvas to draw. — markE, Sep 15 '13 at 17:40
BTW, if you draw a Bezier curve with the 2 control points being the same, you have a quadratic curve. Sometimes it helps to think of the 2 curves related this way. — markE, Sep 15 '13 at 17:42
Design-wise, a benefit to quadratic curves is that you can model a poly-bezier curve using shortcuts based on the fact that all points constrain each other (This is also a shortcoming, because moving one coordinate in a quadratic poly-Bezier will completely change the shape). By only using curves with control points reflected over on-curve points means you only need the first control point, plus all the on-curve points, saving you lots of space when encoding the curve (this is how TrueType fonts model their outlines) — Mike 'Pomax' Kamermans, Sep 15 '13 at 18:40
@markE Sir what you said in last comment is simply wrong! Cubic bezier with same control points are not quadratic beziers! IN fact if we convert quadratic beziers to cubic, we get two different handles, with different coordinates. To wit, http://jsfiddle.net/xz1hdmjv/ See this SVG example : http://jsfiddle.net/vkcahL1e/ — Max Payne, Apr 02 '15 at 05:11

score 17 · Answer 2 · answered Sep 09 '14 at 06:36

17

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.

answered Sep 09 '14 at 06:36

fang

3,473
1
13
19

1

What if we compare two connected quadratic curves to one cubic curve? Can't they achieve the same level of flexibility? – vek Nov 02 '16 at 19:26
3

You can increase the level of flexibility with two connected quadratic curves. But that come with the price of increased complexity as you have two curves instead of one. Furthermore, you have to make sure that these two curves are always connected with tangent continuity. Even if you have done this, these two curves are likely to have curvature discontinuity at the connection. So, a cubic curve is still a better bet to avoid all these troubles. – fang Nov 02 '16 at 22:21
1

What is monotonic curvature? – Scorb Apr 01 '21 at 16:49
@Scorb A monotonic curvature means that the curvature is always increasing or decreasing as we move along the curve (like in a spiral) – Maxence Aug 06 '23 at 16:11

What is the difference between cubic bezier and quadratic bezier and their use cases?

2 Answers2