HTML5 Canvasで大きなフォントを描画する方法を解説

HTML5 Canvasで大きなフォントを正しく描くには？

HTML5のCanvas要素に大きなサイズのフォントを描画したい場合、fontプロパティにフォントサイズとフォントファミリーを指定し、fillText()やstrokeText()メソッドを使うことで実現できます。

以下に、大きな文字を描画するサンプルコードを紹介します。この例では、180ptのGeorgiaフォントを使用し、塗りつぶしと輪郭線の両方を設定しています。

サンプルコード

var myCanvas = document.getElementById("myCanvas");

var context = myCanvas.getContext("2d");
context.font = '180pt Georgia';
context.strokeStyle = "#FF0000";
context.fillStyle = "#FFFFFF";
context.lineWidth = 34;

context.fillText("Demo!", 0, 200);
context.strokeText("Demo!", 0, 200);

コードの解説

各設定項目の役割は以下の通りです。

context.font
フォントのスタイル、サイズ、種類をまとめて指定します。「'180pt Georgia'」のように記述することで、180ptサイズのGeorgiaフォントが適用されます。

context.strokeStyle
文字の輪郭線の色を指定します。この例では赤（#FF0000）が設定されています。

context.fillStyle
文字の塗りつぶしの色を指定します。この例では白（#FFFFFF）が設定されています。

context.lineWidth
輪郭線の太さをピクセル単位で指定します。値を大きくすると、より太く力強い縁取りになります。

fillText() / strokeText()
fillText()は塗りつぶした文字を描画し、strokeText()は輪郭線のみの文字を描画します。両方を呼び出すことで、塗りつぶし＋縁取りの装飾的なテキストが完成します。引数の「0, 200」は、文字列を描画する開始位置のX座標・Y座標です。

注意点

Canvasからコンテキストを取得する際は、必ずCanvas要素そのものに対してgetContext("2d")を呼び出してください。変数名を誤るとエラーになるため注意が必要です。また、フォントサイズが大きい場合は、Canvas要素自体の幅と高さも十分に確保しておきましょう。