How to create Elliptical Arcs (Curves) in HTML5 Canvas

Elliptical Arcs (Curves) without gradient fill in HTML5 Canvas - Nibunan

Elliptical Arcs (Curves) with gradient fill in HTML5 Canvas - Nibunan

This airticle explains how to add Elliptical Arcs (Curves) in HTML5 Canvas. It also explains how to create the sample Object in HTML5 Canvas using Elliptical Arcs (Curves) with and without gradient fill.

Elliptical Arcs with different directions

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 elliptical arc 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 drawellipticalArc(centerX, centerY, radiusx, radiusy, startAngle, endAngle) {
      endAngle = endAngle < startAngle ? endAngle + 360 : endAngle;
      startAngle = startAngle * (2 / 360);
      endAngle = endAngle * (2 / 360);
      for (var i = startAngle * Math.PI; i < endAngle * Math.PI; i += 0.01) {
      var xPos = centerX - (radiusy * Math.sin(i)) * Math.sin(0 * Math.PI) + (radiusx * Math.cos(i)) * Math.cos(0 * Math.PI);
      var yPos = centerY + (radiusx * Math.cos(i)) * Math.sin(0 * Math.PI) + (radiusy * Math.sin(i)) * Math.cos(0 * Math.PI);
      if (i == 0) {
      drawingSurface.moveTo(xPos, yPos);
      } else {
      drawingSurface.lineTo(xPos, yPos);
      }
      }
      }
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.beginPath();
      drawellipticalArc(200, 200, 100, 50, 250, 150);
      drawingSurface.stroke();
      </script>
      </body>
      </html>
    

Sample object using Elliptical Arcs 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 elliptical arc in html5 canvas - Nibunan</title>
      </head>
      <body style="margin: 0px">
      <canvas width="700" height="500" 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(250, 270, 1, 250, 270, 200);
      grdient.addColorStop(0, "rgb(100,100,255)");
      grdient.addColorStop(1, "rgb(0,0,50)");
      return grdient;
      }
      function drawellipticalArc(centerX, centerY, radiusx, radiusy, startAngle, endAngle) {
      endAngle = endAngle < startAngle ? endAngle + 360 : endAngle;
      startAngle = startAngle * (2 / 360);
      endAngle = endAngle * (2 / 360);
      for (var i = startAngle * Math.PI; i < endAngle * Math.PI; i += 0.01) {
      var xPos = centerX - (radiusy * Math.sin(i)) * Math.sin(0 * Math.PI) + (radiusx * Math.cos(i)) * Math.cos(0 * Math.PI);
      var yPos = centerY + (radiusx * Math.cos(i)) * Math.sin(0 * Math.PI) + (radiusy * Math.sin(i)) * Math.cos(0 * Math.PI);
      if (i == 0) {
      drawingSurface.moveTo(xPos, yPos);
      } else {
      drawingSurface.lineTo(xPos, yPos);
      }
      }
      }
      function drawObject() {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = getRadialGradient();
      drawingSurface.beginPath();
      drawellipticalArc(250, 150, 50, 100, 120, 50);
      drawellipticalArc(350, 270, 100, 50, 220, 140);
      drawellipticalArc(250, 390, 50, 100, 310, 230);
      drawellipticalArc(150, 270, 100, 50, 40, 320);
      drawingSurface.fill();
      drawingSurface.stroke();
      }
      drawObject();
      </script>
      </body>
      </html>
    

Sample object using Elliptical Arcs 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 elliptical arc in html5 canvas - Nibunan</title>
      </head>
      <body style="margin: 0px">
      <canvas width="700" height="500" id="drawing-surface"></canvas>
      <script type="text/javascript">
      var canvas = document.getElementById("drawing-surface");
      var drawingSurface = document.getElementById("drawing-surface").getContext("2d");
      function drawellipticalArc(centerX, centerY, radiusx, radiusy, startAngle, endAngle) {
      endAngle = endAngle < startAngle ? endAngle + 360 : endAngle;
      startAngle = startAngle * (2 / 360);
      endAngle = endAngle * (2 / 360);
      for (var i = startAngle * Math.PI; i < endAngle * Math.PI; i += 0.01) {
      var xPos = centerX - (radiusy * Math.sin(i)) * Math.sin(0 * Math.PI) + (radiusx * Math.cos(i)) * Math.cos(0 * Math.PI);
      var yPos = centerY + (radiusx * Math.cos(i)) * Math.sin(0 * Math.PI) + (radiusy * Math.sin(i)) * Math.cos(0 * Math.PI);
      if (i == 0) {
      drawingSurface.moveTo(xPos, yPos);
      } else {
      drawingSurface.lineTo(xPos, yPos);
      }
      }
      }
      function drawObject() {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.beginPath();
      drawellipticalArc(250, 150, 50, 100, 120, 50);
      drawellipticalArc(350, 270, 100, 50, 220, 140);
      drawellipticalArc(250, 390, 50, 100, 310, 230);
      drawellipticalArc(150, 270, 100, 50, 40, 320);
      drawingSurface.stroke();
      }
      drawObject();
      </script>
      </body>
      </html>