テキストの描画

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

テキストの描画

キャンバスの描画コンテキストでは、 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);
}

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

draw();

`strokeText` の例

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

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

<canvas id="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 を扱ったことがあれば、これらのプロパティも見慣れているでしょう。

以下は WHATWG 提供の、textBaseline 属性によってサポートされている様々なベースラインを示した図です。 em 矩形の上端はフォントのグリフの上端にほぼ一致し、 hanging baseline は 906 のようないくつかのグリフが固定されているところ、 middle は em 矩形の上端と下端の中間、alphabetic baseline は Á, ÿ, f, Ω などの文字が固定されているところ、ideographic baseline は私や達などのグリフが固定され、em 矩形の底はフォント中のグリフの底にほぼ一致しているところです。グリフが em 矩形の外まで伸びているため、バウンディングボックスの上端と下端はこれらのベースラインから遠く離れていることがあります。

textBaseline の例

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

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);</textarea>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener('click', function() {
  textarea.focus();
})

textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);

高度なテキスト測定

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

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

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

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

Gecko 固有の注意事項

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