枠を塗った矩形を描く(strokeRect) [html5 の Canvas を使ってみる：第卌回]

fillRect に引き続き、今度は strokeRect(); と strokeStyle で枠線を塗りつぶした矩形を描画してみる。

★html 側

<canvas id="strokeRect"></canvas>

★Javascript 側

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

// strokeStyle で赤の透明度 50% に枠の色を指定
  c.fillStyle = "rgba(255, 0, 0, .5)";
// 枠を塗りつぶした矩形を描画
  c.strokeRect(10, 10, 100, 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