構文

context . miterLimit [ = value ]

現在のマイター限界比率を返します。

値をセットして、マイター限界比率を変更することができます。その値が 0 より大きい有限値でなければ、無視されます。

仕様

マイター限界比率は、miterLimit 属性を使って明示的にセットすることができます。取得時には、現在の値が返されなければいけません。セット時には、ゼロ、負の値、無限大、NaN（数値ではないもの）をセットしようとしても、それは無視され、値は変更されてはいけません。そうでなければ、現在の値を新しい値に変更しなければいけません。

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

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

補足

miterLimit 属性は、lineJoin 属性が miter の場合に、2 直線の結合部分の扱い方を定義するものです。

下図は、miterLimit 属性によって、2 直線の結合部がどのように扱われるのかを示したものです。赤色の補助線のように 2 直線をつなげると、それぞれの直線の幅がある程度太ければ、グレー部分のような状態で描かれることになります。lineJoin 属性は、グレー部分の窪んだ部分をどのように埋め合わせるかを定義しますが、もし lineJoin 属性に miter がセットされていると（明示的に miter を指定しなくても、lineJoin 属性は miter で初期化されています。）、左側の図のように、2 直線の外側の延長線を結んで、窪んだ部分が埋め合わされるはずです。

左側の図のように、マイター限界がマイター長より大きければ、オレンジ色の四角形の部分が追加で塗りつぶされます。 つまり、先端が尖った図形として2直線が結合されます。miterLimit 属性の初期値は 10.0 です。つまり、マイター限界の距離は、グレーの線幅の半分の長さの 10 倍ということになります。したがって、miterLimit 属性の値を変更しなければ、よほど鋭角に 2 直線を接続しない限り、通常はこの状態になります。

しかし、miterLimit 属性に小さい値をセットすると、右側の図のように、マイター限界がマイター長より小さくなります。この場合、lineJoin 属性に bevel がセットされた状態と同じになります。

なお、上図のオレンジ色の部分は、説明のために意図的に色を分けて図示したものです。実際には 2 直線と同じ色で塗りつぶされますので注意してください。

サンプル

このサンプルは、miterLimit 属性を使って、マイター限界比率を 1.5 として、2 直線を接続したものです。lineWidth 属性を使って、2 直線の太さを 20 としています。黒色の部分が実際に描かれる部分です。2 直線の中心線として赤色の補助線を引きました。またマイター限界の位置を見せるために青色の補助線を引きました。マイター限界長は、線幅の半分の長さ 10 に マイター限界比率 1.5 を掛けた 15 となります。つまり、赤線の交差点から上に向かって 15 の位置がマイター限界となります。

上図の左側はマイター限界を超えた場合のサンプルです。もしマイター限界を超えていなかった場合には、ピンク色で描かれた部分も描画されます。ところが、2 直線の外側の縁の交差点がマイター限界を超えていますので、bevel として描画されます。

上図の右側はマイター限界を超えなかった場合のサンプルです。2 直線の外側の縁の交差点がマイター限界を超えていないため、2 直線の交差点の角までしっかりと描かれます。

以下のコードは、右側の図を描くコードです。

/* マイター限界比率を定義 */
ctx.miterLimit = 3.0;
/* 線の幅を定義 */
ctx.lineWidth = 20;
/* 2直線を引く */
ctx.beginPath();
ctx.moveTo(30, 90);
ctx.lineTo(50, 30);
ctx.lineTo(70, 90);
ctx.stroke();
/* 補助線 */
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.moveTo(30, 90);
ctx.lineTo(50, 30);
ctx.lineTo(70, 90);
ctx.stroke();

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

ブラウザ対応状況