How to create Quadratic Curve in HTML5 Canvas

Poly Quadratic Curve without gradient fill in HTML5 Canvas - Nibunan

Poly Quadratic Curve with gradient fill in HTML5 Canvas - Nibunan

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

Quadratic 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 quadratic 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 drawQuadCurve(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 += 2) {
      drawingSurface.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
      }
      drawingSurface.stroke();
      }
      drawQuadCurve([
      { x: 100, y: 200 },
      { x: 200, y: 100 },
      { x: 300, 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 quadratic 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(300, 250, 1, 300, 250, 200);
      grdient.addColorStop(0, "rgb(255,0,255)");
      grdient.addColorStop(1, "rgb(50,0,50)");
      return grdient;
      }
      function drawQuadCurve(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 += 2) {
      drawingSurface.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
      }
      drawingSurface.fill();
      drawingSurface.stroke();
      }
      drawQuadCurve([
      { x: 200, y: 150 },
      { x: 300, y: -50 },
      { x: 400, y: 150 },
      { x: 600, y: 250 },
      { x: 400, y: 350 },
      { x: 300, y: 550 },
      { x: 200, y: 350 },
      { x: 0, y: 250 },
      { x: 200, y: 150 }
      ]);
      </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 quadratic 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 drawQuadCurve(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 += 2) {
      drawingSurface.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
      }
      drawingSurface.stroke();
      }
      drawQuadCurve([
      { x: 200, y: 150 },
      { x: 300, y: -50 },
      { x: 400, y: 150 },
      { x: 600, y: 250 },
      { x: 400, y: 350 },
      { x: 300, y: 550 },
      { x: 200, y: 350 },
      { x: 0, y: 250 },
      { x: 200, y: 150 }
      ]);
      </script>
      </body>
      </html>