canvas要素でパスの接続している角（線結合）の形状を変更する
canvas要素でパスの接続している角（線結合）の形状を変更するには、context.lineJoinプロパティを使用します。
構文
context.lineJoin = joinValue;| 値 | joinValue | 形状 設定可能な値は次を参照 設定可能な形状 |
|---|
設定可能な形状
| 値 | サンプル画像 | 説明 |
|---|---|---|
| 'miter' |  |
線の接続点（ポイント）を延長し結合され塗りつぶす（尖がる） この指定はcanvas.miterLimitプロパティの影響を受ける（初期値） |
| 'bevel' |  |
線の接続点（ポイント）を三角形の計上で塗りつぶす |
| 'round' |  |
線の接続点（ポイント）を中心として円形に塗りつぶす |
サンプルコード
HTML
<canvas width="150" height="150" id="sample"></canvas>JavaScript
var canvasElem = document.getElementById('sample'),
ctx = canvasElem.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineJoin = 'round';
ctx.moveTo(25, 125);
ctx.lineTo(25, 25);
ctx.lineTo(125, 25);
ctx.stroke();