直線接続点を miter とする限界を設定する(miterLimit) [html5 の Canvas を使ってみる：第卅五回]

lineJoin では接続点の形を bevel、round、miter に定義したが、それが未定義の場合、この miterLimit の値で bevel か miter かを設定できるみたい。
miterLimit で設定した値に線の太さの半分を掛けた値が miter で描画される限界値となる。接続点から miter として描画される先端までの距離よりも miterLimit の限界値が小さければ bevel として描画され、大きければ miter として描画される。

★html 側

<canvas id="miterLimit"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: miterLimit で 2 次元描画を行うことの定義
  var c = document.getElementById("miterLimit").getContext('2d');

// miterLimit の値を 1.4 に設定
  c.miterLimit = 1.4;
// 線幅 20 の直角二等辺三角形を、
// lineTo(); と closePath(); と lineWidth で描画
  c.beginPath();
  c.moveTo(30, 30);
  c.lineTo(100, 30);
  c.lineTo(100, 100);
  c.closePath();
  c.lineWidth = 20;
  c.stroke();
}

この三角形の右上の角で接続点から角の先端までの距離を考えてみる。線の太さが 10 なので、一辺が 10 の直角二等辺三角形として考えると、1:1:√2 の関係であり、10 * 1.414...となるので、14.14...となる。拡大した図を下記に載せてみる（下記は接続点から先端までの距離を示すために描画したもので、上記のソースとは関係ない）。


さて、この場合の限界値は miterLimit が 1.4 で線の太さが 20 なので、20 / 2 * 1.4 = 14 となる。その値よりも上記で割り出した 14.14...は大きいため、この場合、右上の角は bevel として描画される。他の 2 つの角は (180 - 90) / 2 = 45°となり、接続点から先端まで結んだ線を引くと、底辺が線の太さの半分である 10 で、45 / 2 = 22.5°の角を持つ三角形を作ることができる。このことから、接続点から先端までの長さは 10 / Math.sin(22.5 * Math.PI / 180) で 26.13...と値を求めることができる。この値と限界値を比べると、限界値の方が小さいので、右上以外の角は bevel で描画されることになる。


次に、miterLimit の値を 1.5 にしてみる。すると、先ほどの右上の角の値が 14.14...で、今回の限界値は 20 / 2 * 1.5 = 15 なので、限界値の方が大きくなる。よって右上の角は miter で描画されるが、他の 2 つの角は限界値の方が小さいので、依然として bevel で描画される。

// miterLimit の値を 1.5 に設定
c.miterLimit = 1.5;

最後に、miterLimit の値を 2.7 に設定する。今回の限界値は 20 / 2 * 2.7 = 27 であり、右上以外の角の値が 26.13...なので、どの角よりも限界値が大きくなる。よって、全ての角が miter として描画される。

// miterLimit の値を 2.7 に設定
c.miterLimit = 2.7;

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5