HTML5 Canvasで大きなフォントサイズのテキストを正しく描画・ストロークする方法

HTML5 Canvasで大きなフォントサイズのテキストを描画する方法

HTML5のCanvas要素で大きなサイズのフォントを正しく描画したい場合には、fontプロパティでフォントのサイズと種類を指定し、lineWidthでストローク（輪郭線）の太さを設定します。

次のサンプルコードでは、180ptのGeorgiaフォントを使って「Demo!」というテキストを描画しています。fillStyleで塗りつぶしの色、strokeStyleで輪郭線の色を指定し、fillText()メソッドとstrokeText()メソッドを組み合わせることで、白い文字に赤い縁取りが付いた、見栄えの良い大きなテキストを実現できます。

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);

コードのポイント解説

fillText()は文字の内側を塗りつぶして描画し、strokeText()は文字の輪郭線だけを描画します。この2つのメソッドを順に呼び出すことで、塗りつぶしとストロークを同時に適用した装飾的なテキストを作成できます。

また、座標「0, 200」はテキストの描画開始位置を示しており、第2引数がX座標、第3引数がベースラインとなるY座標です。大きなフォントの場合、キャンバスから文字がはみ出さないよう、位置やサイズのバランスに注意してください。

さらに、lineWidthの値が大きすぎると文字の細部が潰れてしまうことがあるため、フォントサイズとの兼ね合いを見ながら最適な太さを調整しましょう。