塗りつぶしテキストを書いてみる(fillText) [html5 の Canvas を使ってみる：第廿二回]

今までやっていた作業が一段落したので、また canvas を再開してみた。今回は、fillText(); を使ってテキストを書いてみる。テキスト関係は色々とあるけど、とりあえず、fillText(); だけで何ができるのかな、と。

★html 側

<canvas id="fillText"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: fillText で 2 次元描画を行うことの定義
  var c = document.getElementById("fillText").getContext('2d');

// 「テキストを書いてみる」という文字を、
// x:50、y:50 の座標に配置
  c.fillText("テキストを書いてみる", 50, 50);
}

これだけだと、こうなる。指定した x:50、y:50 という座標が判りにくいので、薄く青い補助線を引いてみた。

テキストのベースラインと左端が交差した部分が指定の座標だということが判った。

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5