Web FontsをHTML Canvasで使う

といっても特に変わった事をする必要も無く、CSSでWeb Fontsを定義して、Canvasのfontプロパティに定義した名前をセットするだけ。

@font-face{
   font-family: MadoMagi;
   src: url('./MadokaRunes.ttf') format("truetype");
}

ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "32px MadoMagi ";

https://nullpon.moe/dev/sample/css/webfont/

こちらのサイトのソースを見てもらえば分かるが、ページのローディング時のCanvasへの書き込みは、jQueryのdocument.readyイベントではなくwindow.loadイベントで行っている。これはdocument.readyイベントではWebFontsが適用されなかったためだ。

document.readyのイベントハンドラは、実際にはブラウザのdocument.DOMContentLoadedイベントをトリガーに実行される。これはHTMLを読み込んで解析し、DOMツリーの構築が終わった段階だ。おそらく、この時点ではまだWebFontsの読み込みが行われておらず、フォントを適用することができないのだろう。

同じように画像もreadyイベントでcanvasに書き出すことができなかった。フォントや画像のようなリソースをJavaScriptから利用する場合、document.DOMContentLoadedイベントでは扱わず、window.loadイベント以降で扱うのが正解のようだ。