lineCap端点のスタイル

ctx.beginPath();
ctx.moveTo(10,10); 
ctx.lineWidth = 20;
ctx.lineTo(50,10);
ctx.lineCap = "butt"; 
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 20;
ctx.moveTo(10,10);
ctx.lineTo(50,10);
ctx.lineCap = "round"; 
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 20;
ctx.moveTo(10,20);
ctx.lineTo(50,20);
ctx.lineCap = "square"; 
ctx.stroke();

lineJoin頂点のスタイル

ctx.beginPath();
ctx.lineWidth = 20;
ctx.moveTo(20,20);
ctx.lineTo(50,35);
ctx.lineTo(20,50);
ctx.lineJoin = "bevel";
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 20;
ctx.moveTo(20,20);
ctx.lineTo(50,35);
ctx.lineTo(20,50);
ctx.lineJoin = "round";
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 20;
ctx.moveTo(20,20);
ctx.lineTo(50,35);
ctx.lineTo(20,50);
ctx.lineJoin = "miter";
ctx.stroke();

lineJoinがmiterの場合，miterLimitで尖りの限界値を設定

ctx.beginPath();
ctx.lineWidth = 20;
ctx.moveTo(20,20);
ctx.lineTo(50,35);
ctx.lineTo(20,50);
ctx.miterLimit = 1;
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 20;
ctx.moveTo(20,20);
ctx.lineTo(50,35);
ctx.lineTo(20,50);
ctx.miterLimit = 5;
ctx.stroke();