Bezier and quadratic curves

These are generally used to draw complex organic shapes.
 
The difference between these can best be described using the image on the right. A quadratic Bézier curve has a start and an end point and just one control point while a cubic Bézier curve uses two control points.
 
The x and y parameters in both these methods are the coordinates of the end point. cp1x and cp1y are the coordinates of the first control point, and cp2x and cp2y are the coordinates of the second control point.
 
Using quadratic and cubic Bézier curves can be quite challenging, because unlike vector drawing software like Adobe Illustrator, we don’t have direct visual feedback as to what we’re doing. This makes it pretty hard to draw complex shapes. In the following example, we’ll be drawing some simple organic shapes, but if you have the time and, most of all, the patience, much more complex shapes can be created.
 
There’s nothing very difficult in these examples. In both cases we see a succession of curves being drawn which finally result in a complete shape.

Example 1

<!DOCTYPE HTML>
<html>
    <head>
        <title>Canvas tutorial</title>
        <script>
            function draw(){
               var ctx = document.getElementById('canvas').getContext('2d');
                // Quadratric curves example
                ctx.beginPath();
                ctx.moveTo(75, 25);
                ctx.quadraticCurveTo(25, 25, 25, 62.5);
                ctx.quadraticCurveTo(25, 100, 50, 100);
                ctx.quadraticCurveTo(50, 120, 30, 125);
                ctx.quadraticCurveTo(60, 120, 65, 100);
                ctx.quadraticCurveTo(125, 100, 125, 62.5);
                ctx.quadraticCurveTo(125, 25, 75, 25);
                ctx.stroke();
            }
        </script>
    </head>
    <body onload="draw();">
        <canvas id="canvas" width="200" height="200">
        </canvas>
    </body>
</html>

Output

Untitled

It is possible to convert any quadratic Bézier curve to a cubic Bézier curve by correctly computing both cubic Bézier control points from the single quadratic Bézier control point, although the reverse is NOT true. An exact conversion of a cubic Bézier curve to a quadratic Bézier curve is only possible if the cubic term is zero, more commonly a subdivision method is used to approximate a cubic Bézier using multiple quadratic Bézier curves.

Example 2

<!DOCTYPE HTML>
<html>
    <head>
        <title>Canvas tutorial</title>
        <script>
            function draw(){
                var ctx = document.getElementById('canvas').getContext('2d');
                // Bezier curves example
                ctx.beginPath();
                ctx.moveTo(75, 40);
                ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
                ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
                ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
                ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
                ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
                ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
                ctx.fill();
            }
        </script>
    </head>
    <body onload="draw();">
        <canvas id="canvas" width="200" height="200">
        </canvas>
    </body>
</html>

Output

Untitled2