lineCap

The lineCap attribute defines the type on the end of lines.

• butt: the end of each line has a flat edge perpendicular to the direction of the line (and that no additional line cap is added).
• round: a semi-circle with the diameter equal to the width of the line must then be added on to the end of the line.
• square: a rectangle with the length of the line width and the width of half the line width, placed flat against the edge perpendicular to the direction of the line, must be added at the end of each line.

example:

function drawLineCap(context){

 context.strokeStyle = "#000000";
 context.lineWidth = 20;
 context.beginPath();
 context.moveTo(50, 50);
 context.lineTo(300, 50);
 context.stroke();
 context.closePath();

 context.lineCap = "butt"
 context.strokeStyle = "#FF0000";
 context.lineWidth = 20;
 context.beginPath();
 context.moveTo(50, 100);
 context.lineTo(300, 100);
 context.stroke();
 context.closePath();

 context.lineCap = "round"
 context.strokeStyle = "#00FF00";
 context.lineWidth = 20;
 context.beginPath();
 context.moveTo(50, 150);
 context.lineTo(300, 150);
 context.stroke();
 context.closePath();

 context.lineCap = "square"
 context.strokeStyle = "#0000FF";
 context.lineWidth = 20;
 context.beginPath();
 context.moveTo(50, 200);
 context.lineTo(300, 200);
 context.stroke();
 context.closePath();

}