構文

context . lineJoin [ = value ]

現在の線接続スタイルを返します。

値をセットして、線接続スタイルを変更することができます。

利用可能な線接続スタイルは、bevel, round, miter です。それ以外の値は無視されます。

仕様

lineJoin 属性は、ユーザーエージェントが 2 直線の接続する角をどう扱うかを考慮するタイプを定義します。bevel, round, miter の3タイプの値をセットすることができます。

取得時には、現在の値が返されなければいけません。セット時には、新しい値が bevel, round, miter のいずれかであれば、現在の値が新しい値に変更されなければいけません。それ以外の値は無視され、値は変更されてはいけません。

コンテキストが生成されるとき、lineJoin 属性は miter で初期化されなければいけません。ます。

2つの連続した直線によって共有されるサブパスには接続点が存在します。サブパスが閉じられると、接続点は、その最初の地点（最後の地点と同等）となり、そのサブパスの最初と最後の直線を接続します。

接続が発生した地点に加え、2つの地点が各接続に関係してきます。それらは、接続点から各線に対して垂直の方向に向かい、線の太さの半分の距離に位置する2つの角で、他方の線から最も遠い側にあります。

これら2つの向かい合った角と接続点を直線で結んで作られた三角形は、すべての接続点で塗りつぶされて描画されます。lineJoin 属性は、これ以外に何か描画すべきかどうかを制御します。前述の3つの値の意味は次の通りです：

bevel という値は、すでに接続地点で描画される状態のみで、他に描画すべきものはないことを意味します。

round という値は、前述の2つの接続の角と接しており、前述の三角形に隣接（重なってはいない）し、直径は線の太さに等しく、中心が接続点となる円弧で塗りつぶすことを意味します。

miter という値は、（もしマイター長が与えられるなら）接続点に、塗りつぶされた三角形がもう一つ描画されることを意味します。この三角形とは、前述の二つの角を結ぶ線で最初の三角形に隣接し、二つの接続線の外側の線を延長して作られる三角形です。ただし、二つの接続線の外側の線を延長して重なる地点が、マイター長を超えない場合に限ります。

マイター長とは、各線の中心線が交差する場所から、各線の外側の縁が交差する地点までの距離のことです。マイター限界比率とは、線幅の半分の長さに対するマイター長の最大許容倍率を表します。もしマイター長がマイター限界比率を超えてしまったら、この二つ目の三角形は描画されません。

原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-linejoin

※ マイター限界については「miterLimitプロパティ」を参照して下さい。

補足

lineJoin に関しては、言葉の説明だけでは分かりにくいため、図を使って補足します。　

上図の bevel をご覧ください。これは 2 本の線を接続したもので、それぞれの線の中心線を赤色の補助線で示しています。線には幅がありますので、実際に描画されるのは、グレーで塗られた部分となります。まず最初に、グレー部分の外側の角を結んだ直線（点線部分）を境に、2 直線の接続点の窪んだ部分（オレンジ色）が塗られます。これが初期状態です。lineJoin の仕様では、この初期状態に対して、lineJoin 属性の値に応じて塗りつぶす領域を追加するといっています。上図では、この追加される領域を、緑色で表しています。

lineJoin 属性に "bevel" をセットすると、初期状態から何も追加されません。初期状態と、lineJoin に bevel がセットされた場合は同じです。

lineJoin 属性に "round" をセットすると、2 本の赤線が交差する地点が中心で半径が線幅の半分となる円が描かれます。

lineJoin 属性に "miter" をセットすると、2 本の線の外側の縁を延長してできる三角形部分が追加されます。

サンプル

このサンプルは、左から順に、round, bevel, miter を lineJoin プロパティにセットした線を描いたものです。それぞれのプロパティ値の特徴が分かりやすいよう、線の折り返し地点を結ぶ赤色の補助線を引きました。

round を指定すると、線の折り返し地点をはみ出すように円弧が描かれます。bevel を指定すると、折り返し地点を少しだけはみ出したフラットな切り口となります。miter を指定すると、2 直線の外側をそのまま延長して作られた三角形が形作られますが、このサンプルのように、線が太く角度がきつい場合は、折り返し地点を大幅にはみ出します。

/* 線の幅を定義 */
ctx.lineWidth = 15;
/* roundの例 */
ctx.beginPath();
ctx.lineJoin = "round";
ctx.moveTo(10, 90);
ctx.lineTo(25, 40);
ctx.lineTo(40, 90);
ctx.stroke();
/* bevelの例 */
ctx.beginPath();
ctx.lineJoin = "bevel";
ctx.moveTo(60, 90);
ctx.lineTo(75, 40);
ctx.lineTo(90, 90);
ctx.stroke();
/* miierの例 */
ctx.beginPath();
ctx.lineJoin = "miter";
ctx.moveTo(110, 90);
ctx.lineTo(125, 40);
ctx.lineTo(140, 90);
ctx.stroke();
/* 補助線 */
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.moveTo(10, 40);
ctx.lineTo(140, 40);
ctx.stroke();

[lineJoin プロパティの実際のサンプル]

ブラウザ対応状況