MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

テキストを描く

canvas のレンダリングコンテキストでは、2 種類のテキスト描画方法を提供します:

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

fillText の例

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

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

strokeText の例

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

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

テキストのスタイルを設定する

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

font = value
テキストを描画する際に使用するテキストのスタイルです。CSSfont プロパティと同じ構文にのっとった文字列です。デフォルトのフォントは 10px sans-serif です。
textAlign = value
テキストの配置を設定します。使用できる値は startendleftrightcenter です。デフォルト値は start です。
textBaseline = value
ベースラインの位置ぞろえを設定します。使用できる値は tophangingmiddlealphabeticideographicbottom です。デフォルト値は alphabetic です。
direction = value
書字方向を設定します。使用できる値は ltrrtlinherit です。デフォルト値は inherit です。

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

以下は WHATWG 提供の、textBaseline 属性によってサポートされている様々なベースラインを示した図です。The top of the em square is

roughly at the top of the glyphs in a font, the hanging baseline is

where some glyphs like आ are anchored, the middle is half-way

between the top of the em square and the bottom of the em square,

the alphabetic baseline is where characters like Á, ÿ,

f, and Ω are anchored, the ideographic baseline is

where glyphs like 私 and 達 are anchored, and the bottom

of the em square is roughly at the bottom of the glyphs in a

font. The top and bottom of the bounding box can be far from these

baselines, due to glyphs extending far outside the em square.

textBaseline の例

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);

高度なテキスト測定

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

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

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

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var text = ctx.measureText("foo"); // TextMetrics オブジェクト
  text.width; // 16;
}

Gecko 固有の注意事項

Gecko (Firefox、Firefox OS および他の Mozilla ベースアプリケーション) では一部の接頭辞付き API で、早期バージョンのテキスト描画法を実装しています。これらは非推奨化または削除されており、動作を保証しません。

ドキュメントのタグと貢献者

 このページの貢献者: yyss, teoli, Potappo, Mgjbot, Kohei, Taken
 最終更新者: yyss,