Canvas でテキストの中央揃え

昨日から引き続き HTML5 Canvas 読んでて、今日は「3.1　基本的なテキストの描画」をやってる。

テキストの中央揃えには measureText() メソッド を使うみたい。

• measureText() メソッド - Canvasリファレンス - HTML5.JP

以下のものでは Canvas 幅の半分の位置から算出したテキスト幅の半分をさらに引いて行内 （x軸）の中央揃えを行い、列内（y軸）に対しての中央揃えは単純に Canvas の縦幅の半分の位置を使ってる。

上記の指定を行った後、これらを context.fillText の x座標、y座標に指定するとテキストが中央揃えになる。

Demo: http://jsfiddle.net/thleap/aqs5at8p/4/

window.addEventListener('load', eventWindowLoaded, false);

function eventWindowLoaded() {
  canvasApp();
}

function canvasApp() {
  var theCanvas = document.getElementById('canvasOne');
  var context = theCanvas.getContext('2d');

  var message = 'your text';

  var formElement = document.getElementById('textBox');
  formElement.addEventListener('keyup', textBoxChanged, false);

  drawScreen();

  function drawScreen() {
    // 背景
    context.fillStyle = 'yellow';
    context.fillRect(0, 0, theCanvas.width, theCanvas.height);
    // テキスト
    context.font = '24px sans-serif';

    // テキストを Canvas に対して中央揃え
    var metrics = context.measureText(message);
    var textWidth = metrics.width;
    var xPosition = (theCanvas.width / 2) - (textWidth / 2);

    var yPosition = (theCanvas.height / 2);

    context.fillStyle = 'red';
    context.fillText(message, xPosition, yPosition);
  }

  // input 要素に入力したテキストを Canvas 上に表示
  function textBoxChanged(e) {
    var target = e.target;
    message = target.value;
    drawScreen();
  }
}

---

最初に出してる "your text" の部分が中央揃えにならなくて困った。

• http://jsfiddle.net/thleap/aqs5at8p/3/

けど、それは中央揃え関連の指定の後に context.font の指定を置いていたからだった。

中央揃え関連の指定前に context.font の指定を置いてやると最初に出しているテキストにも中央揃えが適用された。