Easy jQquery Plugins

TechnoPlugin

A bezier curve is similar to quadratric curve, only difference is that quadratic curve has one control point and a bezier curve has two control points. Below is the code to draw a bezier curve using canvas.

    <!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.bezierCurveTo(120,0, 300, 50, 250, 170);
        context.lineWidth = 10;
        context.strokeStyle = '#30cd74';
        context.stroke();

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

The above code will produce the following result

A bezier curve can be created using the bezierCurveTo() method.
Starting point of the curve is defined by the moveTo() method. The first 2 parameters of the bezierCurveTo() method are the x and y coordinates of the control point 1 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 bezierCurveTo() method are the x and y coordinates of the control point 2 of the curve. The fifth and sixth parameters of the bezierCurveTo() method are the x and y coordinates of the ending point of the curve.

Close
loading
  Contact Submit plugin