HTML - linecap property in html5 canvas - tutorial

Code

<!DOCTYPE html>
<html>
   <head>
          <title>Wikitechy HTML Canvas lineCap Property with example</title>
   </head>
   <body>
         <h1>HTML Canvas lineCap Property with example</h1>
         <h3>The three different line caps:</h3>
         <canvas id="wikitechyCanvas" width="400" height="200" style="border:1px solid green;">
         </canvas>
         <script>
              var lc = document.getElementById("wikitechyCanvas");
              var lcx = lc.getContext("2d");
              lcx.beginPath();
              lcx.lineWidth = 15;
              lcx.lineCap = "butt";
              lcx.moveTo(100, 40);
              lcx.lineTo(300, 40);
              lcx.stroke();

lcx.beginPath();
              lcx.lineCap = "round";
              lcx.moveTo(100, 80);
              lcx.lineTo(300, 80);
              lcx.stroke();

lcx.beginPath();
              lcx.lineCap = "square";
              lcx.moveTo(100, 120);
              lcx.lineTo(300, 120);
              lcx.stroke();
         </script>
    </body>
</html>

Result