How to create Circuar Arcs (Curves) in HTML5 Canvas

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

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

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

Circular 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 circular 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 drawArc(cx, cy, radius, startAngle, endAngle) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.beginPath();
      startAngle = startAngle * (2/360);
      endAngle = endAngle * (2/360);
      drawingSurface.arc(cx, cy, radius, startAngle * Math.PI, endAngle * Math.PI, false);
      drawingSurface.stroke();
      }
      drawArc(200, 200, 150, 150, 30);
      </script>
      </body>
      </html>
    

Sample object using Circular 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 circular 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 getRadialGradient() {
      var grdient = drawingSurface.createRadialGradient(200, 270, 1, 200, 270, 150);
      grdient.addColorStop(0, "rgb(255,175,200)");
      grdient.addColorStop(1, "rgb(75,0,25)");
      return grdient;
      }
      function drawArc(cx, cy, radius, startAngle, endAngle) {
      startAngle = startAngle * (2 / 360);
      endAngle = endAngle * (2 / 360);
      drawingSurface.arc(cx, cy, radius, startAngle * Math.PI, endAngle * Math.PI);
      }
      function drawObject() {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.beginPath();
      drawingSurface.fillStyle = getRadialGradient();
      drawArc(200, 200, 50, 130, 50);
      drawArc(270, 270, 50, 220, 140);
      drawArc(200, 340, 50, 310, 230);
      drawArc(130, 270, 50, 40, 320);
      drawingSurface.fill();
      drawingSurface.stroke();
      }
      drawObject();
      </script>
      </body>
      </html>
    

Sample object using Circular 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 circular 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 drawArc(cx, cy, radius, startAngle, endAngle) {
      startAngle = startAngle * (2 / 360);
      endAngle = endAngle * (2 / 360);
      drawingSurface.arc(cx, cy, radius, startAngle * Math.PI, endAngle * Math.PI);
      }
      function drawObject() {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.beginPath();
      drawArc(200, 200, 50, 130, 50);
      drawArc(270, 270, 50, 220, 140);
      drawArc(200, 340, 50, 310, 230);
      drawArc(130, 270, 50, 40, 320);
      drawingSurface.stroke();
      }
      drawObject();
      </script>
      </body>
      </html>