HTML5 canvasにテキストを表示する

HTML5 canvas APIには、テキストを塗りで描画するfillText()や線で描画するstrokeText()といったメソッドが用意されており、テキストをパスオブジェクトと同様に扱うことができます。

テキストを塗りで描画する fillText()

fillText()は、テキストを塗りで描画します。第1引数で表示するテキストを指定し、第2, 3引数で表示する座標(x, y)を指定します。仕様上は、オプションの第4引数でテキストの最大幅を指定できるようになっていますが、現時点では各ブラウザでの解釈がバラバラなので指定しない方が良いでしょう。下記の例では、canvasの中央に灰色のテキストでHello World!と表示しています。

JavaScript

window.onload = function() {
  var canvas = document.getElementById('my-canvas');
  var context = canvas.getContext('2d');
  context.save();
  context.translate(canvas.width * 0.5, canvas.height * 0.5);
  // 塗りの色
  context.fillStyle = '#666666';
  // フォント
  context.font = "bold 50px 'Arial'";
  // テキストの行揃え
  context.textAlign = 'center';
  // テキストのベースライン
  context.textBaseline = 'middle';
  context.fillText('Hello World!', 0, 0);
  context.restore();
};

テキストのアウトラインを線で描画する strokeText()

strokeText()は、テキストのアウトラインを線で描画します。引数はfillText()と同様に第1引数で表示するテキスト、第2, 3引数で表示する座標(x, y)、オプションの第4引数でテキストの最大幅となります。下記の例では、canvasの中央にHello World!の文字列をアウトラインで表示しています。

JavaScript

window.onload = function() {
  var canvas = document.getElementById('my-canvas');
  var context = canvas.getContext('2d');
  context.save();
  context.translate(canvas.width * 0.5, canvas.height * 0.5);
  // 線の色
  context.strokeStyle = '#666666';
  // フォント
  context.font = "bold 50px 'Arial'";
  // テキストの行揃え
  context.textAlign = 'center';
  // テキストのベースライン
  context.textBaseline = 'middle';
  context.strokeText('Hello World!', 0, 0);
  context.restore();
};

テキストのスタイルを指定するプロパティ

いくつかのプロパティを通してテキストのスタイルを指定することができます。fontプロパティでは、使用するフォントに関するスタイルをCSSと同様の形式で指定します。textAlignプロパティでは、テキストの行揃えを"start", "end", "left", "right", "center"の中から指定します。

textBaselineプロパティでは、テキストのベースラインの位置を"top", "hanging", "middle", "alphabetic", "ideographic", "bottom"の中から指定します。

JavaScript

window.onload = function() {
  var canvas = document.getElementById('my-canvas');
  var context = canvas.getContext('2d');
  context.save();
  context.translate(canvas.width * 0.5, canvas.height * 0.5);
  // 塗りの色
  context.fillStyle = '#666666';
  // フォント
  context.font = "italic bold 70px 'Arial'";
  // テキストの行揃え
  context.textAlign = 'center';
  // テキストのベースライン
  context.textBaseline = 'bottom';
  context.fillText('Hello World!', 0, 30);
  context.restore();
};

表示する文字列の幅を測る measureText()

measureText()を使うと表示する文字列が必要とする幅を事前に調べることができます。measureText()は、引数で表示したい文字列を渡します。戻り値の TextMetricsオブジェクトのwidthプロパティが、文字列を表示するのに必要な幅となります。

JavaScript

window.onload = function() {
  var canvas = document.getElementById('my-canvas');
  var context = canvas.getContext('2d');
  context.save();
  context.translate(canvas.width * 0.5, canvas.height * 0.5);
  context.fillStyle = '#666666';
  context.font = "bold 43px 'Arial'";
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  var str = 'This is HTML5 canvas.';
  var width = context.measureText(str).width;
  context.fillText(str, 0, -25);
  context.fillText('width:' + Math.floor(width), 0, 25);
  context.restore();
};