Canvas Example Bezier Curve

To create a Bezier curve with HTML5 Canvas, we can use the bezierCurveTo() method. Bezier curves are defined with the context point, two control points, and an ending point. Unlike quadratic curves, Bezier curves are defined with two control points instead of one, allowing us to create more complex curvatures. Bezier curves can be styled with the lineWidth, strokeStyle, and lineCap properties.

by Shashank D

HTML

<canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(100, 200);
      context.bezierCurveTo(120, 100, 10, 388, 170);
      context.lineWidth = 10;

      // line color
      context.strokeStyle = 'black';
      context.stroke();
    </script>

CSS

body {
        margin: 0px;
        padding: 0px;
      }