キャンバスサイズに基づいてHTML5 Canvasのフォントサイズをスケーリングする方法

キャンバスサイズに基づいてフォントをスケーリングする方法

HTML5のCanvasでは、キャンバスの幅が変わってもテキストの見た目のバランスを保つために、フォントサイズをキャンバスサイズに比例させて拡大・縮小すると便利です。ここでは、その基本的な考え方と具体的な実装例を紹介します。

基本となる例

たとえば、幅800pxのキャンバスに対してフォントサイズ60pxを使用するケースを考えてみましょう。

Canvas: 800px　フォントサイズ: 60px

比率を使ったフォントサイズの計算

フォントサイズをキャンバスの幅に応じてスケールさせるには、まず「基準となるキャンバス幅に対するフォントサイズの比率」を求め、それを実際のキャンバス幅に掛け合わせます。次のコードで実現できます。

var fontBase = 800;   // 基準となるキャンバスの幅
var fontSize = 60;    // 基準となるフォントサイズ

function getFont() {
    var ratio = fontSize / fontBase;      // 比率を計算（60 / 800 = 0.075）
    var cSize = canvas.width * ratio;     // 実際のキャンバス幅に比率を掛ける
    return (cSize | 0) + 'px sans-serif'; // 整数に丸めてフォント指定文字列として返す
}

コードのポイント

• ratio（比率）: 基準フォントサイズを基準キャンバス幅で割ることで、1pxあたりのフォントサイズの割合を求めます。
• cSize: 現在のcanvas.widthに比率を掛けることで、キャンバスの幅がどのサイズでも常に同じ相対的な文字の大きさを維持できます。
• (cSize | 0): ビット演算子「|」を利用して小数点以下を切り捨て、整数値に整えています。

実際の使用例

ctx.font = getFont();
ctx.fillText('Hello, Canvas!', 50, 100);

このようにgetFont()関数を活用すれば、キャンバスのサイズが変化しても、テキストは常に一定のバランスで描画されます。レスポンシブ対応のCanvasアプリケーションや、ウィンドウリサイズに追従する描画処理を実装する際に、ぜひ役立ててください。