How to create Polygon in HTML5 Canvas

rounded corner Polygon in HTML5 Canvas - Nibunan

Linear gradient effect in Polygon in HTML5 Canvas - Nibunan

Radial gradient effect in Polygon in HTML5 Canvas - Nibunan

Transparancy in Polygon in HTML5 Canvas - Nibunan

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

Polygon

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 polygon 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 drawPolygon(points) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = 'rgb(255,128,0)';
      drawingSurface.beginPath();
      drawingSurface.moveTo(points[0].x, points[0].y);
      for (var i = 1; i < points.length; i++) {
      drawingSurface.lineTo(points[i].x, points[i].y);
      }
      drawingSurface.closePath();
      //this.DrawingContext.globalAlpha = polygon.AlphaFill / 255;
      drawingSurface.fill();
      //this.DrawingContext.globalAlpha = polygon.AlphaStroke / 255;
      drawingSurface.stroke();
      }
      drawPolygon([
      { x: 100, y: 200 },
      { x: 200, y: 100 },
      { x: 300, y: 200 },
      { x: 250, y: 300 },
      { x: 150, y: 300 }
      ]);
      </script>
      </body>
      </html>
    

Polygon 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 polygon 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,128,0)");
      grdient.addColorStop(1, "rgb(50,0,0)");
      return grdient;
      }
      function drawPolygon(points) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = getLinearGradient();
      drawingSurface.beginPath();
      drawingSurface.moveTo(points[0].x, points[0].y);
      for (var i = 1; i < points.length; i++) {
      drawingSurface.lineTo(points[i].x, points[i].y);
      }
      drawingSurface.closePath();
      //this.DrawingContext.globalAlpha = polygon.AlphaFill / 255;
      drawingSurface.fill();
      //this.DrawingContext.globalAlpha = polygon.AlphaStroke / 255;
      drawingSurface.stroke();
      }
      drawPolygon([
      { x: 100, y: 200 },
      { x: 200, y: 100 },
      { x: 300, y: 200 },
      { x: 250, y: 300 },
      { x: 150, y: 300 }
      ]);
      </script>
      </body>
      </html>
    

Polygon 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 polygon 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(150, 150, 1, 200, 200, 150);
      grdient.addColorStop(0, "rgb(255,128,0)");
      grdient.addColorStop(1, "rgb(50,0,0)");
      return grdient;
      }
      function drawPolygon(points) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = getRadialGradient();
      drawingSurface.beginPath();
      drawingSurface.moveTo(points[0].x, points[0].y);
      for (var i = 1; i < points.length; i++) {
      drawingSurface.lineTo(points[i].x, points[i].y);
      }
      drawingSurface.closePath();
      //this.DrawingContext.globalAlpha = polygon.AlphaFill / 255;
      drawingSurface.fill();
      //this.DrawingContext.globalAlpha = polygon.AlphaStroke / 255;
      drawingSurface.stroke();
      }
      drawPolygon([
      { x: 100, y: 200 },
      { x: 200, y: 100 },
      { x: 300, y: 200 },
      { x: 250, y: 300 },
      { x: 150, y: 300 }
      ]);
      </script>
      </body>
      </html>
    

Polygon 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 polygon 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 drawPolygon(points,strokeOpacity,fillOpacity) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = 'rgb(255,128,0)';
      drawingSurface.beginPath();
      drawingSurface.moveTo(points[0].x, points[0].y);
      for (var i = 1; i < points.length; i++) {
      drawingSurface.lineTo(points[i].x, points[i].y);
      }
      drawingSurface.closePath();
      drawingSurface.globalAlpha = fillOpacity;
      drawingSurface.fill();
      drawingSurface.globalAlpha = strokeOpacity;
      drawingSurface.stroke();
      }
      drawPolygon([
      { x: 100, y: 200 },
      { x: 200, y: 100 },
      { x: 300, y: 200 },
      { x: 250, y: 300 },
      { x: 150, y: 300 }
      ], 1, 1);

      drawPolygon([
      { x: 150, y: 200 },
      { x: 250, y: 100 },
      { x: 350, y: 200 },
      { x: 300, y: 300 },
      { x: 200, y: 300 }
      ], 0.5, 0.5);
      </script>
      </body>
      </html>