lineCap property

The lineCap property determines how the end points of every line are drawn. There are three possible values for this property and those are: butt, round and square. By default this property is set to butt.

Example

<!DOCTYPE HTML>
<html>
    <head>
        <title>Canvas tutorial</title>
        <script>
            function draw(){
				var ctx = document.getElementById('canvas').getContext('2d');
				var lineCap = ['butt', 'round', 'square'];
				
				// Draw guides
				ctx.strokeStyle = '#09f';
				ctx.beginPath();
				ctx.moveTo(10, 10);
				ctx.lineTo(140, 10);
				ctx.moveTo(10, 140);
				ctx.lineTo(140, 140);
				ctx.stroke();
				
				// Draw lines
				ctx.strokeStyle = 'black';
				for (var i = 0; i < lineCap.length; i++) {
					ctx.lineWidth = 15;
					ctx.lineCap = lineCap[i];
					ctx.beginPath();
					ctx.moveTo(25 + i * 50, 10);
					ctx.lineTo(25 + i * 50, 140);
					ctx.stroke();
				}
			}
        </script>
    </head>
    <body onload="draw();">
        <canvas id="canvas" width="200" height="200">
        </canvas>
    </body>
</html>