Canvas内のテキストをクリックして，新規ページを開く
Canvasは視覚表現にはとても便利ですが，例えばcanvas内のオブジェクトをクリックすることで別ページに飛ぶ．といったhtml特有の振る舞いをさせるためには少し手間をかけないといけません．通常はhtml要素でまかなえることは極力html要素に実装するのがよいですが，canvas内のオブジェクトをhtmlのhref要素のように振る舞わせたい場合もあるでしょう．このページではcanvas上に描画された任意のテキストをクリックすることで，指定したページを開くコードを記述します．
具体的には任意のテキスト上にマウスが乗っているか，いないかを判別するための関数を準備し，それを活用することで上記機能は実現できます．
function isMouseInsideText(_message, _messageX, _messageY) {
// テキストの横幅を計算
const messageWidth = textWidth(_message);
// アセンド，ディセンドの関係については以下のURLを参照のこと
// https://qiita.com/bit0101/items/dc051015e458eb1ff2ab
const messageTop = _messageY - textAscent();
const messageBottom = _messageY + textDescent();
if( mouseX > _messageX && mouseX < _messageX + messageWidth &&
mouseY > messageTop && mouseY < messageBottom ){
return true;
}
else{
return false;
}
}