Joining lines on the canvas

This tutorial explains how to join lines on the canvas. The lines that we will join in this tutorial will end up looking like this:

Screen Shot 2015-05-08 at 6.59.43 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html>
<head>
 <title>Joining lines</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
</head>
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.lineWidth = 20;
 ctx.lineCap = "butt"; // options are: square, round, butt
 ctx.lineJoin = "round"; // options are: round, bevel, miter
 //ctx.miterLimit = 3;
 //ctx.setLineDash([20,10]); //adds dashes -length of dash,length of gap between dash
 //ctx.lineDashOffset = 20;
 
 ctx.beginPath();
 ctx.moveTo(50,50);
 ctx.lineTo(150,250);
 ctx.lineTo(250,50);
 ctx.lineTo(150,50);
 ctx.strokeStyle="#FF0000";
 ctx.stroke();
 //ctx.fill(); will add a fill
 }
 window.onload = draw;
 </script>
 
 <canvas id="myCanvas" width="300" height="300">
</body>
</html>

Next tutorial: Drawing paths on the canvas