Easy jQquery Plugins

Submit plugin Contact ☰

Quadratic Curve

Below is the code to draw a quadtratic curve


    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        #myCanvas {
            border: 1px solid #000;
        }
    </style>
    </head>
    <body>
    <canvas id="myCanvas" width="400" height="350"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        context.beginPath();
        context.moveTo(100, 150);
        context.quadraticCurveTo(200, 0, 300, 250);
        context.lineWidth = 10;
        context.strokeStyle = '#30cd74';
        context.stroke();

    </script>
    </body>
    </html>

The above code will produce the following result

Explanation

A quadratic curve can be created using the quadraticCurveTo() method.
Starting point of the curve is defined by the moveTo() method. The first 2 parameters of the quadraticCurveTo() method are the x and y coordinates of the control point of the curve(A control point is a point which is created by the intersection of two tangential lines drawn across the curve). The third and fourth parameters of the quadraticCurveTo() method are the x and y coordinates of the ending point of the curve.

Contact Submit plugin