bezier curve in html5

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>
  • Don

    I need a bezier curve with 4 points however line connecting p1 and p2 should be touching the curve at its mid point. Chaikin 1/4 method. Can you modify the code for that

    https://www.iit.bme.hu/~salvi/archive/snippets/subdivision.html

    4 control points, show control polygon and chaikin 1/4 method. Can you modify the code for that