[HTML5] Canvasで描画するテキストの高さと横幅を取得して、上下左右中央に表示する

こんにちは、@yoheiMuneです。
久しぶりにHTML5 Canvasを触ったので、それに関するブログを書きたいと思います。

HTML5 Canvasでテキストを描画する際に、上下左右中央に表示するのは大変？

最近、自分のポートフォリオサイトを作り始めました。 TopページにHTML5 Canvasを使って、文字をページの真ん中に表示するように作っています。

Canvasでテキストを表示したのは、色々とアニメーションさせたかったからで、 ページの真ん中にテキストを表示するのが案外面倒だったので、その方法をブログに残しておきたいと思います。

テキストを左右中央に表示する

テキストを左右中央に配置するのは簡単です。
以下のどちらかの方法で、左右中央に表示することが出来ます。

実装方法１：textAlignを利用する（オススメ）

１つ目の方法は、textAlignをcenterに指定することです。centerに指定すると、描画対象に指定したx座標を中心に描画することが出来ます。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;

// ここがポイントです！
context.textAlign = 'center';

// Canvaswidthの中央をx座標に指定して、左右中央に描画する
context.fillText(text, canvas.width / 2, 100);

こんな感じで、textAlignを使って、左右中央に表示することが出来ます。

実装方法２：テキストの長さを測って、ページの左右中央に表示する

HTML5 Canvasの機能で、指定した文字列の描画した際の横幅を取得することが出来ます。

var textWidth = context.measureText('Sample Text').width;

そしてこの取得した値をもとに、描画するx座標を指定します。

context.fillText(text, (canvas.width - textWidth) / 2, 100);

これで左右中央に表示することが出来ました。

テキストを上下中央に表示する

上下中央に表示するのはちょっと面倒です。テキストの高さを取得する方法が提供されていないためです。 そのため、自分でテキストの高さを取得する必要があります。
本当に正確なテキストの高さを取得するのは難しいですが（利用する文字やフォントにより文字組みが異なるからです）、 描画する文字列の高さは、以下のようにすれば取得できます。

// まずはとりあえず描画します。
context.fillText('サンプル文字列', 0, 0);

// 描画した内容のピクセルデータを取得し、１件ずつ調べることで高さを取得します。
var pixels = context.getImageData(0, 0, canvasWidth, canvasHeight);
var data = pixels.data;
var textHeight = 0;
var currentRow = -1;
for (var i = 0, len = data.length; i < len; i += 4) {
  var r = data[i], g = data[i+1], b = data[i+2], alpha = data[i+3];
  if (alpha > 0) {
    var row = floor((i / 4) / canvas.width);
    if (row > currentRow) {
      currentRow = row;
      textHeight++;
    }
  }
}

// テキストの高さが取得できました。
console.log('textHeight: ', textHeight);

描画されたピクセルデータを１件ずつ調べて、透明でないピクセル（alphaがゼロでない）を調べて、テキストの高さを取得します。

そして取得したテキストの高さを利用して、上下中央に描画します。

context.fillText('サンプル文字列', 100, (canvas.height - textHeight) / 2);

これで、上下中央にテキストを描画できました。

最後に

Canvasは、ビットマップを描画したり、アニメーションさせたりととても便利な機能です。
しかし表現の部分となると、HTML+CSSには劣る部分もあって、それを補うための工夫も色々と必要です。
色々なTipsを集めると、Canvasでの描画がより楽しくなりそうです。

最後までご覧頂きましてありがとうございました。