globalCompositeOperationプロパティ　サンプル1

セレクトメニューで globalCompositeOperation を選択してください。

globalCompositeOperationプロパティ　サンプル2

上にのせるグラフィックスに「テキスト」を追加しました。
globalCompositeOperation は、1度指定すると、そのあとのグラフィクス全部に影響することがわかります。

サンプル1のソース

サンプル1のソースはこちらです。（全体のソースはブラウザでご確認ください）
ちなみにこのサンプルでは <select>要素を使って globalCompositeOperation の選択ができるようにしています。

<form id="composite">
<b>globalCompositeOperation</b> :
<select name="type" onchange="draw1();">
    <option value="source-atop">source-atop</option>
    <option value="source-in">source-in</option>
    <option value="source-out">source-out</option>
    <option value="source-over" selected>source-over (default)</option>
    <option value="destination-atop">destination-atop</option>
    <option value="destination-in">destination-in</option>
    <option value="destination-out">destination-out</option>
    <option value="destination-over">destination-over</option>
    <option value="lighter">lighter</option>
    <option value="copy">copy</option>
    <option value="xor">xor</option>
</select>
</form>

<canvas id="canvas1" width="400" height="200">
    <p>お使いのブラウザはcanvas要素に対応していないので描画できませんでした</p>
</canvas>

<script>
onload = function() {
    draw1();
};

function draw1() {
    var cnvs1 = document.getElementById('canvas1');
    var ctx1 = cnvs1.getContext('2d');
/*このdraw1を読み込むたびに画面を初期化する*/
    ctx1.fillStyle = '#fff';
    ctx1.globalAlpha = 1.0;
    ctx1.globalCompositeOperation = 'source-over';
    ctx1.clearRect(0, 0, canvas1.width, canvas1.height);	
/* 別に作った2つの背景用のキャンバスを描画 */
    ctx1.drawImage(rect1,210,10,180,180);
    ctx1.drawImage(rect2,10,10,180,180);
/*合成タイプをセレクトメニューで選択したものにする*/
    //composite はform要素のID名、type はselect要素のname属性の値
    var form = document.forms['composite'];
    //globalCompositeOperationがそのvalue値になるよう指定しています
    ctx1.globalCompositeOperation = form.type.value; 
/*上にのせる花の画像を描画*/
    ctx1.drawImage(rect3, 0, 0);
}
// 背景の「緑の四角形」を描画したキャンバスを作成（ソース省略）
// 背景の「雲の画像」を描画したキャンバスを作成（ソース省略）
// 上にのせる「花の画像」を描画したキャンバスを作成（ソース省略）
</script>