枠線でできたテキストを書いてみる(strokeText) [html5 の Canvas を使ってみる：第廿三回]

fillText(); に引き続き、strokeText(); を使って枠線でできたテキストを書いてみる。こちらもとりあえず、strokeText(); だけで何ができるのかな、と。

★html 側

<canvas id="strokeText"></canvas>

★Javascript 側

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

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

これだけだと、こうなる。fillText(); と同じように 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