四角　カクカク

ではまず最初、四角形を描画してみましょう。
四角形といってもメソッド自体は３種類あるのです。

context.fillRect(x, y, w, h)

塗りつぶしの四角形を描画します。
引数は名前でなんとなく予想できそうですが、塗りつぶしの指定がねぇ。
これは別途メソッドがありますので、一旦後述にします。
ちなみに、contextの部分は、getContextで取得したcanvasObjectの事ですよ。
まずは引数から順番に

x

横軸の座標位置
ちなみに、縦横0はcanvasの左上となります。見慣れたデフォ値ですねぇ

y

縦軸の座標位置

w

描画する四角形の横幅

ｈ

描画する四角形の縦幅

書く必要があるのか疑問になる内容ですね。
一旦これで描画してみます。

  var canvas = document.getElementById('canvas01');
  if (canvas.getContext) {
    var context = canvas.getContext('2d');
    //左から20上から40の位置に、幅50高さ100の四角形を描く
    context.fillRect(20,40,50,100);
  }

なんとまぁ、うん。単純ね。
では、少し話にでてきた、色系のメッソッドをついでに

context.fillStyle = prm

こいつで色味の指定をしてあげましょう。
prmの部分に関しては、[CSSと同様の色指定・グラデーション値・パターン値のいずれかを指定]となっています。
こいつは引数で指定するパターンではなく、ズボッと代入しちゃう感じ。
なので、別図形は別色にするためには、都度入れ替えが必要になってきます。
グラーデーションについてはまた別メソッドがいりますので、これはほんとに後回しにします。キリない

  var canvas2 = document.getElementById('canvas02');
  if (canvas2.getContext) {
    var context2 = canvas2.getContext('2d');
    //左から20上から40の位置に、幅50高さ100の四角形を描く
    context2.fillStyle  = "rgb(0, 0, 255)";
    context2.fillRect(20,40,50,100);
    context2.fillStyle  = "#ff0000";
    context2.fillRect(40,50,50,100);
  }

context.strokeRect(x, y, w, h)

今回は【塗りつぶしナシ】の四角形です。
引数は正直同じですので、説明はありません。

  var canvas3 = document.getElementById('canvas03');
  if (canvas3.getContext) {
    var context3 = canvas3.getContext('2d');
    //左から20上から40の位置に、幅50高さ100の四角形を描く
    context3.strokeRect(20,40,50,100);
  }

context.clearRect(x, y, w, h)

四角の形に切り取ります。
何言ってだお前と思われでしょう。ほんと何言ってんだ。
引数も同じ、これも見りゃわかります。

  var canvas4 = document.getElementById('canvas04');
  canvas4.style.backgroundColor = '#ddd';
  if (canvas4.getContext) {
    var context4 = canvas4.getContext('2d');
    //左から40上から50の位置に、幅50高さ100の四角形を描く
    context4.fillRect(40,50,50,100);
    //左から20上から40の位置に、幅50高さ100の四角形でくり抜く
    context4.clearRect(20,40,50,100);
  }

上記例ではあえて背景色を付けました。
くり抜くっつても、くり抜くのは描画したものだけであり、canvas自体の背景には関係ないものとなるのがパッと見で分かるためです