How to create Circle in HTML5 Canvas

rounded corner Circle in HTML5 Canvas - Nibunan

Linear gradient effect in Circle in HTML5 Canvas - Nibunan

Radial gradient effect in Circle in HTML5 Canvas - Nibunan

Transparancy in Circle in HTML5 Canvas - Nibunan

This airticle explains how to add Circle in HTML5 Canvas. It also explains how to create linear gradient effect in Circle, How to create radial gradient effect in Circle and how to create the transparancy in Circle.

Circle

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 circle 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 drawCircle(cx, cy, radius) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = 'rgb(0,150,0)';
      drawingSurface.beginPath();
      drawingSurface.arc(cx, cy, radius, 0, 2 * Math.PI, false);
      drawingSurface.closePath();
      drawingSurface.fill();
      drawingSurface.stroke();
      }
      drawCircle(200, 200, 150);
      </script>
      </body>
      </html>

      <!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 circle 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 drawCircle(cx, cy, radius) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = 'rgb(0,150,0)';
      drawingSurface.beginPath();
      drawingSurface.arc(cx, cy, radius, 0, 2 * Math.PI, false);
      drawingSurface.closePath();
      drawingSurface.fill();
      drawingSurface.stroke();
      }
      drawCircle(200, 200, 150);
      </script>
      </body>
      </html>
    

Circle with linear gradient

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 circle 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 getLinearGradient() {
      var grdient = drawingSurface.createLinearGradient(50, 50, 350, 50);
      grdient.addColorStop(0, "rgb(0,200,0)");
      grdient.addColorStop(1, "rgb(0,50,0)");
      return grdient;
      }
      function drawCircle(cx, cy, radius) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = getLinearGradient();
      drawingSurface.beginPath();
      drawingSurface.arc(cx, cy, radius, 0, 2 * Math.PI, false);
      drawingSurface.closePath();
      drawingSurface.fill();
      drawingSurface.stroke();
      }
      drawCircle(200, 200, 150);
      </script>
      </body>
      </html>
    

Circle with radial gradient gradient

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 circle 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");
      var canvas = document.getElementById("drawing-surface");
      var drawingSurface = document.getElementById("drawing-surface").getContext("2d");
      function getRadialGradient() {
      var grdient = drawingSurface.createRadialGradient(200, 200, 1, 200, 200, 150);
      grdient.addColorStop(0, "rgb(0,200,0)");
      grdient.addColorStop(1, "rgb(0,50,0)");
      return grdient;
      }
      function drawCircle(cx, cy, radius) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = getRadialGradient();
      drawingSurface.beginPath();
      drawingSurface.arc(cx, cy, radius, 0, 2 * Math.PI, false);
      drawingSurface.closePath();
      drawingSurface.fill();
      drawingSurface.stroke();
      }
      drawCircle(200, 200, 150);
      </script>
      </body>
      </html>
    

Circle with transparency

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 circle 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 drawCircle(cx, cy, radius, strokeOpacity, fillOpacity) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = 'rgb(0,150,0)';
      drawingSurface.beginPath();
      drawingSurface.arc(cx, cy, radius, 0, 2 * Math.PI, false);
      drawingSurface.closePath();
      drawingSurface.globalAlpha = fillOpacity;
      drawingSurface.fill();
      drawingSurface.globalAlpha = strokeOpacity;
      drawingSurface.stroke();
      }
      drawCircle(200, 200, 150, 1, 1);
      drawCircle(300, 200, 150, 0.5, 0.5);
      </script>
      </body>
      </html>