テキストの描画

前の章でスタイルや色を適用する方法を見た後は、キャンバスにテキストを描画する方法を見ていきます。

テキストの描画

キャンバスの描画コンテキストでは、 2 種類のテキスト描画方法を提供しています。

fillText(text, x, y [, maxWidth]): (x,y) で指定した位置にテキストを塗りつぶして描画します。任意で最大描画幅を指定できます。
strokeText(text, x, y [, maxWidth]): (x,y) で指定した位置にテキストの輪郭を描画します。任意で最大描画幅を指定できます。

`fillText` の例

現在の fillStyle を使用して、テキストを塗りつぶして描画します。

function draw() {
  const ctx = document.getElementById("my-canvas").getContext("2d");
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);
}

<canvas id="my-canvas" width="300" height="100"></canvas>

draw();

`strokeText` の例

現在の strokeStyle を使用して、テキストの輪郭を描画します。

function draw() {
  const ctx = document.getElementById("my-canvas").getContext("2d");
  ctx.font = "48px serif";
  ctx.strokeText("Hello world", 10, 50);
}

<canvas id="my-canvas" width="300" height="100"></canvas>

draw();

テキストのスタイル設定

上記の例では、テキストを既定のサイズより若干大きくするため、すでに font プロパティを使用していました。キャンバスにテキストを表示する形式を調整できるプロパティは、さらにいくつかあります。

font = value: テキストを描画する際に使用するテキストのスタイルです。 CSS の font プロパティと同じ構文に則った文字列です。既定のフォントは 10px sans-serif です。
textAlign = value: テキストの配置を設定します。使用できる値は start、end、left、right、center です。既定値は start です。
textBaseline = value: ベースラインの位置ぞろえを設定します。使用できる値は top、hanging、middle、alphabetic、ideographic、bottom です。既定値は alphabetic です。
direction = value: 書字方向を設定します。使用できる値は ltr、rtl、inherit です。既定値は inherit です。

以前に CSS を扱ったことがあれば、これらのプロパティも見慣れているでしょう。

以下は HTML 仕様書にある、textBaseline 属性によって対応している様々なベースラインを示した図です。

em-over ベースラインはフォントのグリフの上端にほぼ一致し、hanging baseline は आ のようないくつかのグリフが固定されているところ、 middle は em-over と em-under ベースラインの中間、alphabetic ベースラインは Á, ÿ, f, Ω などの文字が固定されているところ、ideographic-under ベースラインは私や達などのグリフが固定され、 em-under ベースラインはフォント中のグリフの下端にほぼ一致しているところです。グリフが em-over と em-under ベースラインの外まで伸びているため、バウンディングボックスの上端と下端はこれらのベースラインから遠く離れていることがあります。

`textBaseline` の例

この例では、textBaseline プロパティのさまざまな値について説明しています。詳細や具体的な例については、CanvasRenderingContext2D.textBaseline のページをご覧ください。

<canvas id="my-canvas" width="400" height="100"></canvas>

function draw() {
  const ctx = document.getElementById("my-canvas").getContext("2d");
  ctx.font = "48px serif";

  ctx.textBaseline = "hanging";
  ctx.strokeText("hanging", 10, 50);

  ctx.textBaseline = "middle";
  ctx.strokeText("middle", 250, 50);

  ctx.beginPath();
  ctx.moveTo(10, 50);
  ctx.lineTo(300, 50);
  ctx.stroke();
}

draw();

高度なテキスト測定

テキストのより詳細な情報を得る必要がある場合は、以下のメソッドで測定することができます。

measureText(): 指定したテキストを現在のテキストスタイルで描画したときの幅をピクセル単位で表した情報を持つ、TextMetrics オブジェクトを返します。

以下のコードスニペットは、テキストを測定して幅を得る方法を示しています。

function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  const text = ctx.measureText("foo"); // TextMetrics object
  text.width; // 16;
}

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年8月21日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

テキストの描画