指定した座標が描画された範囲に入っているか調べる(isPointInPath) [html5 の Canvas を使ってみる：第卅八回]

isPointInPath(); では、引数で指定した座標が描画されている矩形等の範囲に入っているかを調べ、boolean で返すらしい。

★html 側

<canvas id="isPointInPath"></canvas>

★Javascript 側

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

// 描画をすることを宣言
  c.beginPath();
// 筆おろしの座標を x:0、y:50 に定義
  c.moveTo(0, 50);
// lineTo(); で x:100、y:50 まで直線を描画
  c.lineTo(100, 50);
// これらの座標に対して線を引く指令
  c.stroke();

// 変数 result に x:50、y:50 が描画範囲内かの結果を代入
  var result = c.isPointInPath(50, 50);
// font で大きな文字を指定
  c.font = "bold 1.5em Times New Roman";
// fillText(); で結果を入れた変数 result を直線の下に描画
  c.fillText(result, 25, 70);
}

すると、こうなる。描画されているのは x:0、y:50 から x:100、y:50 までの直線で、問うてる座標は x:50、y:50 なのでこの直線が通っていることになり、結果 true が描画される。


次に、問う座標を y 軸に -1 して x:50、y:49 として、直線が通っていない箇所を指定する。結果は false と描画される。

// 変数 result に x:50、y:49 が描画範囲内かの結果を代入
var result = c.isPointInPath(50, 49);

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

正常に動作しなかった環境：
Opera 10.53
最初の期待値が true の場合も false と表示されてしまう。

W3C；
4.8.11 The canvas element — HTML 5