How to create Bezier Curve in HTML5 Canvas

Poly Bezier Curve without gradient fill in HTML5 Canvas - Nibunan

Poly Bezier Curve with gradient fill in HTML5 Canvas - Nibunan

This airticle explains how to add Bezier Curve in HTML5 Canvas. It also explains how to create the sample Object in HTML5 Canvas using Poly Bezier Curve with and without gradient fill.

Bezier curve

Open with new tab

Source


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>Create bezier curve in html5 canvas - Nibunan</title>
      </head>
      <body style="margin: 0px">
      <canvas width="700" height="450" id="drawing-surface"></canvas>
      <script type="text/javascript">
      var canvas = document.getElementById("drawing-surface");
      var drawingSurface = document.getElementById("drawing-surface").getContext("2d");
      function drawBezierCurve(points) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.beginPath();
      drawingSurface.moveTo(points[0].x, points[0].y);
      for (var i = 1; i < points.length; i += 3) {
      drawingSurface.bezierCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y, points[i + 2].x, points[i + 2].y);
      }
      drawingSurface.stroke();
      }
      drawBezierCurve([
      { x: 100, y: 200 },
      { x: 50, y: 100 },
      { x: 250, y: 100 },
      { x: 200, y: 200 }
      ]);
      </script>
      </body>
      </html>
    

Sample object with fill

Open with new tab

Source


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>Create bezier curve in html5 canvas - Nibunan</title>
      </head>
      <body style="margin: 0px">
      <canvas width="700" height="450" id="drawing-surface"></canvas>
      <script type="text/javascript">
      var canvas = document.getElementById("drawing-surface");
      var drawingSurface = document.getElementById("drawing-surface").getContext("2d");
      function getRadialGradient() {
      var grdient = drawingSurface.createRadialGradient(150, 250, 1, 150, 250, 150);
      grdient.addColorStop(0, "rgb(255,0,128)");
      grdient.addColorStop(1, "rgb(128,0,0)");
      return grdient;
      }
      function drawBezierCurve(points) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.fillStyle = getRadialGradient();
      drawingSurface.lineWidth = 3;
      drawingSurface.beginPath();
      drawingSurface.moveTo(points[0].x, points[0].y);
      for (var i = 1; i < points.length; i += 3) {
      drawingSurface.bezierCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y, points[i + 2].x, points[i + 2].y);
      }
      drawingSurface.fill();
      drawingSurface.stroke();
      }
      drawBezierCurve([
      { x: 100, y: 200 },
      { x: 50, y: 100 },
      { x: 250, y: 100 },
      { x: 200, y: 200 },
      { x: 300, y: 150 },
      { x: 300, y: 350 },
      { x: 200, y: 300 },
      { x: 250, y: 400 },
      { x: 50, y: 400 },
      { x: 100, y: 300 },
      { x: 0, y: 350 },
      { x: 0, y: 150 },
      { x: 100, y: 200 }
      ]);
      </script>
      </body>
      </html>
    

Sample object without fill

Open with new tab

Source


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>Create bezier curve in html5 canvas - Nibunan</title>
      </head>
      <body style="margin: 0px">
      <canvas width="700" height="450" id="drawing-surface"></canvas>
      <script type="text/javascript">
      var canvas = document.getElementById("drawing-surface");
      var drawingSurface = document.getElementById("drawing-surface").getContext("2d");
      function drawBezierCurve(points) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.beginPath();
      drawingSurface.moveTo(points[0].x, points[0].y);
      for (var i = 1; i < points.length; i += 3) {
      drawingSurface.bezierCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y, points[i + 2].x, points[i + 2].y);
      }
      drawingSurface.stroke();
      }
      drawBezierCurve([
      { x: 100, y: 200 },
      { x: 50, y: 100 },
      { x: 250, y: 100 },
      { x: 200, y: 200 },
      { x: 300, y: 150 },
      { x: 300, y: 350 },
      { x: 200, y: 300 },
      { x: 250, y: 400 },
      { x: 50, y: 400 },
      { x: 100, y: 300 },
      { x: 0, y: 350 },
      { x: 0, y: 150 },
      { x: 100, y: 200 }
      ]);
      </script>
      </body>
      </html>