四角形の描画[解説]
四角形にはfillとstrokeの要素があります。

rect ( x , y , w , h )
で描画をします。
しかし、この関数を使っただけでは描画されません。

			// fill描画
			context.fill();
			// stroke描画
			context.stroke()
上記が実行されて描画されます。

コメントが付けてあるので解説はなしにします。全ソースです。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8" />
	<title>>四角形の描画</title>

	<script type="text/javascript">
		var context = null;
		var colorVal = 0;//明るさの調整

		function timerTask() {
			var col = 0xff0000 + 0x000100 * colorVal + 0x000001 * colorVal;
			var strCol = "#" + col.toString(16);
			// 線の塗りを設定する
			context.strokeStyle = strCol;
			// 線の太さを設定する
			context.lineWidth = 10.0;
			// 面の塗りを設定する（単一色）
			col = 0x010000 * colorVal + 0x00ff00 + 0x000001 * colorVal;
			strCol = "#" + col.toString(16);
			context.fillStyle = strCol;
			// 描画パスを開始
			context.beginPath();
			// 矩形を描画パスに追加
			context.rect(10, 10, 150, 100);
			// fill描画
			context.fill();
			// stroke描画
			context.stroke()

			colorVal += 5;
			if (colorVal >= 200) {
				colorVal = 0;
			}
		}

		function init() {
			//描画コンテキストの取得
			var canvas = document.getElementById('canvas');
			context = canvas.getContext('2d');
			window.setInterval(timerTask, 100);
		}
	</script>

</head>

<body onLoad="init()">
	<canvas width="200" height="150" id="canvas"></canvas><br>
	解説は<a href="rect_.html">こちら</a>。
</body>

</html>