Html5 canvas draw line Tag

The canvas draw line tag is used to draw line graphics on the web page.

Example Code



<!DOCTYPE HTML>
<html>
<body>
  <canvas id="line_draw" width="200" height="100">
    Your browser does not support the canvas element.
  </canvas>
  <script type="text/javascript">
      var c = document.getElementById("line_draw");
      var cxt = c.getContext("2d");
      cxt.moveTo(10,50);
      cxt.lineTo(100,90);
      cxt.lineTo(100,-150);
      cxt.stroke();
  </script>
</body>
</html>

Out Put :

Your browser does not support the canvas element.

In the above example code moveTo() function is used to draw line start point to end point.which is first parameter 10 is start point and 50 is end point for first line.





Content