HTML5 Canvasで小数フォントサイズを実現する方法

HTML5 Canvasで小数フォントサイズを扱うテクニック

HTML5 Canvasでは、小数点以下を含むフォントサイズ（例：12.5px）を直接指定すると、ブラウザによって描画結果が異なる場合があります。そんなときに有効なのが、非表示キャンバスと drawImage() を組み合わせた手法です。

基本的な考え方

まず初期化時に、標準のフォントサイズでテキストを描画しておきます。続いて measureText() を使い、そのテキストの行の長さ（幅）を計測して基準値として保存します。

実装の手順

非表示のキャンバス（tmpCanvas）にテキストをレンダリングし、その後 drawImage() を使ってメインキャンバスへ、ズーム率（zoom）に応じた倍率を掛けて描画します。これにより、事実上の「小数フォントサイズ」での描画が可能になります。

ctx.font = (font_size * zoom) + "px Georgia";
ctx.fillText(mytext, 0, 0);

var s = (iniLineLength * zoom) / ctx.measureText(mytext);
mainContext.drawImage(tmpCanvas, x, y, pw * s, ph);

実装のポイント

• 初期化時に一度だけテキストを描画し、基準となる行の長さ（iniLineLength）を記録しておく
• ズーム時には ctx.measureText() の計測結果と比較し、スケール係数 s を算出する
• drawImage() の幅指定に s を掛けることで、任意の倍率でテキストを正確に再描画できる

この方法なら、Canvasが本来サポートしていない細かいフォントサイズの制御も、描画品質を保ちながら実現できます。ズーム機能付きのエディタやビューアなど、精密な文字描画が必要なアプリケーションで特に有用です。