ブログでHTML5 Canvas 長方形を描画

html5 canvasについてまとめようと思います。
まずは簡単な長方形の描画から

<canvas id="drawRectCanvas" width="300" height="200"></canvas>
<script>
    (function()
    {
        var canvas = document.getElementById("drawRectCanvas");
        var context = canvas.getContext("2d");
        context.fillRect(20, 40, 200, 100);
    })();
</script>

context.fillRect(x, y, width, height);

xは長方形の左上のx座標。
yは長方形の左上のy座標。
widthは長方形の横幅。
heightは長方形の縦幅。