Bezier curve in HTML5 canvas

The bezier curve requires ending points and two control points and starting points will be current point. You can use the beginPath and moveTo methods to set a starting point.

bezier curve in html5

We use the bezierCurveTo method to draw a bezier curve.

ctx.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y);

cpx1 and cpy1: are the first control points of the bezier curve.
cpx2 and cpy2: are the second control points of the bezier curve.
x and y: are the ending points of the bezier curve.
 

<html>
<head>
  <title>Draw Arc</title>
    <style type="text/css">
        #MyCanvas {border:1px solid black;}
    </style>
  <script type="text/javascript">
      function drawGradient() {
          var ctx;
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              ctx = canvas.getContext("2d");
              // Draw a quadratic curve .
              ctx.beginPath();
              ctx.lineWidth = "2";
              ctx.strokeStyle = "black";
              ctx.moveTo(50, 150);
              ctx.bezierCurveTo(200, 200, 200, 0, 300, 100);
              ctx.stroke();
          }
      }
  </script>
</head>
<body onload="drawGradient();">
  <canvas id="MyCanvas" width="400" height="200">
  This browser or document mode doesn't support canvas object</canvas>
 </body>
</html>

One thought on “Bezier curve in HTML5 canvas”

Comments are closed.