【困った】isPointInPath(x, y)の引数にnullを渡すと・・・

photo by Todd Huffman

context.isPointInPath(x, y)は、指定した座標が現在のパスの内側にあるかどうかを評価するメソッドです。
パーティクルの中にアイコンを混ぜて、アイコンにマウスが乗った時、クリックした時だけに特定の処理をさせるスクリプトを書いていたところ、chromeでは思い通りに動くのに、firefoxではエラーで止まるという事態が起こり原因がわからず躓いてしまいました・・・。

var mouseX,mouseY;
$("#canvas").bind("mousemove",function(e){
mouseX = e.pageX;
mouseY = e.pageY;
});

～中略～

context.beginPath();
if(context.isPointInPath(mouseX, mouseY)){
～いろいろ処理～
}else if(!context.isPointInPath(mouseX, mouseY)){
～いろいろ処理～
};

これだとなぜかクロームだけ動き、firefoxでは動きませんでした。
さんざん悩んだ挙句、nullの扱いが違うのではという結論に。

上のコードですと初期値がnullですので、canvas要素にマウスが乗るまでmouseX,mouseYは共にnullのままです。
その段階でcontext.isPointInPath(mouseX, mouseY)が呼び出された時、クロームではnullが暗黙に0に型変換され、何事も無かったかのように0,0地点を検索しfalseを返すが、firefoxは探すべき数値が見つからずエラーを投げる、のではないかと・・・。

これだけで30分は悩みました！

とりあえず適当な初期値を設定して解決。
関数の引数に使う変数には気をつけよう！というお話でしたｗ

記事の話題関連のツイート on twitter