How to create line in HTML5 Canvas

Polyline without gradient fill in HTML5 Canvas - Nibunan

Polyline with gradient fill in HTML5 Canvas - Nibunan

This airticle explains how to add Line in HTML5 Canvas. It also explains how to create the sample Object in HTML5 Canvas using Polyline with and without gradient fill.

Line

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 line 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 drawLine(x1, y1, x2, y2) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.beginPath();
      drawingSurface.moveTo(x1, y1);
      drawingSurface.lineTo(x2, y2);
      drawingSurface.closePath();
      drawingSurface.stroke();
      }
      drawLine(100, 100, 400, 200);
      </script>
      </body>
      </html>
    

Sample Object 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 polyline 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 drawPolyline(points) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      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.stroke();
      }
      drawPolyline([
      { x: 100, y: 200 },
      { x: 100, y: 150 },
      { x: 150, y: 150 },
      { x: 150, y: 200 },
      { x: 200, y: 200 },
      { x: 200, y: 100 },
      { x: 250, y: 100 },
      { x: 250, y: 200 },
      { x: 300, y: 200 },
      { x: 300, y: 150 },
      { x: 350, y: 150 },
      { x: 350, y: 200 }
      ]);
      </script>
      </body>
      </html>
    

Sample Object 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 polyline 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(300, 200, 1, 300, 200, 150);
      grdient.addColorStop(0, "rgb(0,255,255)");
      grdient.addColorStop(1, "rgb(0,50,50)");
      return grdient;
      }
      function drawPolyline(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();
      drawingSurface.fill();
      drawingSurface.stroke();
      }
      drawPolyline([
      { x: 250, y: 150 },
      { x: 300, y: 50 },
      { x: 350, y: 150 },
      { x: 450, y: 200 },
      { x: 350, y: 250 },
      { x: 300, y: 350 },
      { x: 250, y: 250 },
      { x: 150, y: 200 },
      { x: 250, y: 150 }
      ]);
      </script>
      </body>
      </html>