俺の体が透けていく。

透明度と合成。
合成ってなんなんって感じですが、先に少し言っちゃうと重なった時どうすんの？って指定です。

context.globalAlpha=opacity

透明度。opacityと同じ考えでOKです。
プロパティなので値は引き継がれる事に注意しましょう。

var canvas1 = document.getElementById('canvas01');
canvas1.width = 200;
canvas1.height = 200;
if (canvas1.getContext) {
  var context1 = canvas1.getContext('2d');
  // 四角
  context1.beginPath();
  context1.globalAlpha = "1";
  context1.fillRect(60,30,50,50);
  context1.stroke();

  context1.beginPath();
  context1.fillStyle='#ff0000';
  context1.globalAlpha = "0.5";
  context1.fillRect(90,30,50,50);
  context1.stroke();

  context1.beginPath();
  context1.fillStyle='#0000ff';
  context1.globalAlpha = "0.8";
  context1.fillRect(120,30,50,50);
  context1.stroke();
}

context.globalCompositeOperation=typeName

合成方法を指定してあげます。
合成方法っても結構な量があるわけで、ある分網羅してきましょ

注意点

描画後に指定してあげましょう。
つまり 描画した。重なった場合次のやつどうする？(globalCompositeOperation)
の繰り返しで指定してください。 プロパティなので値は引き継がれる事に注意しましょう。

source-over

初期値
そのまま後要素が上になる形になります。

source-atop

初期値
描画した要素に被る部分のみ表示し、その他は消えます。

source-in

初期値
描画した要素に被る部分のみ表示し、その他は消えます。