塗りつぶし矩形を描く(fillRect) [html5 の Canvas を使ってみる：第卅九回]

fillRect(); と fillStyle で塗りつぶしの矩形を描画してみる。

★html 側

<canvas id="fillRect"></canvas>

★Javascript 側

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

// fillStyle で青の透明度 80% に塗りを指定
  c.fillStyle = "rgba(0, 0, 255, .8)";
// 塗りつぶし矩形を描画
  c.fillRect(10, 10, 100, 50);
}

すると、こうなる。rect(); と違い、最後に stroke(); を記述しても黒い線は描画されない。


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

W3C；
4.8.11 The canvas element — HTML 5