How to create Ellipse in HTML5 Canvas

rounded corner Ellipse in HTML5 Canvas - Nibunan

Linear gradient effect in Ellipse in HTML5 Canvas - Nibunan

Radial gradient effect in Ellipse in HTML5 Canvas - Nibunan

Transparancy in Ellipse in HTML5 Canvas - Nibunan

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

Ellipse

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 ellipse 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 drawEllipse(centerX, centerY, radiusx, radiusy) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = 'rgb(128,0,128)';
      drawingSurface.beginPath();
      for (var i = 0 * Math.PI; i < 2 * 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.closePath();
      drawingSurface.fill();
      drawingSurface.stroke();
      }
      drawEllipse(200, 200, 150, 100);
      </script>
      </body>
      </html>
    

Ellipse 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 ellipse 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(255,0,255)");
      grdient.addColorStop(1, "rgb(50,0,50)");
      return grdient;
      }
      function drawEllipse(centerX, centerY, radiusx, radiusy) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = getLinearGradient();
      drawingSurface.beginPath();
      for (var i = 0 * Math.PI; i < 2 * 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.closePath();
      drawingSurface.fill();
      drawingSurface.stroke();
      }
      drawEllipse(200, 200, 150, 100);
      </script>
      </body>
      </html>
    

Ellipse 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 ellipse 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(200,0,200)");
      grdient.addColorStop(1, "rgb(50,0,50)");
      return grdient;
      }
      function drawEllipse(centerX, centerY, radiusx, radiusy) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = getRadialGradient();
      drawingSurface.beginPath();
      for (var i = 0 * Math.PI; i < 2 * 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.closePath();
      drawingSurface.fill();
      drawingSurface.stroke();
      }
      drawEllipse(200, 200, 150, 100);
      </script>
      </body>
      </html>
    

Ellipse 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 ellipse 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 drawEllipse(centerX, centerY, radiusx, radiusy, fillOpacity, strokeOpacity) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = 'rgb(128,0,128)';
      drawingSurface.beginPath();
      for (var i = 0 * Math.PI; i < 2 * 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.closePath();
      drawingSurface.globalAlpha = fillOpacity;
      drawingSurface.fill();
      drawingSurface.globalAlpha = strokeOpacity;
      drawingSurface.stroke();
      }
      drawEllipse(200, 200, 150, 100, 1, 1);
      drawEllipse(300, 200, 150, 100, 0.5, 0.5);
      </script>
      </body>
      </html>