2 つの異なる globalCompositeOperation 値を使用して矩形を描画します。 赤い矩形は デスティネーション画像で、青い矩形は ソース画像です：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);
Try it Yourself ❯
Internet Explorer 9、Firefox、Opera、Chrome、Safari は、globalCompositeOperation プロパティをサポートしています。
注: Internet Explorer 8 以前は、<canvas> 要素をサポートしていません。
globalCompositeOperation プロパティは、ソース（新しい）画像がデスティネーション（既存の）画像にどのように描画されるかを設定または返します
ソース画像 = キャンバスに配置しようとしている図形。
デスティネーション画像 = 既にキャンバス上に配置されている図形。
| デフォルト値： | source-over |
|---|---|
| JavaScript 構文： | context.globalCompositeOperation="source-in"; |
| 値 | 説明 | Play it | |
|---|---|---|---|
| source-over | デフォルト。デスティネーション画像の上にソース画像を表示する | Play it ❯ | |
| source-atop | デスティネーション画像の上端にソース画像を表示する。 デスティネーション画像の外側にあるソース画像は表示されない | Play it ❯ | |
| source-in | デスティネーション画像の中にソース画像を表示する。 デスティネーション画像の内側にあるソース画像のみが表示される。デスティネーション画像は透明 | Play it ❯ | |
| source-out | デスティネーション画像の外側のソース画像が表示される。 デスティネーション画像の外側にあるソース画像のみが表示される。デスティネーション画像は透明 | Play it ❯ | |
| destination-over | ソース画像の上にデスティネーション画像が表示される | Play it ❯ | |
| destination-atop | ソース画像の上端にデスティネーション画像を表示する ソース画像の外側にあるデスティネーション画像は表示されない | Play it ❯ | |
| destination-in | ソース画像の中にデスティネーション画像を表示する。 ソース画像の内側にあるデスティネーション画像のみが表示される。ソース画像は透明 | Play it ❯ | |
| destination-out | destination-in | ソース画像の外側のデスティネーション画像を表示する。 ソース画像の外側にあるデスティネーション画像のみが表示される。ソース画像は透明 | Play it ❯ |
| lighter | ソース画像 + デスティネーション画像 を表示する | Play it ❯ | |
| copy | ソース画像を表示し、デスティネーション画像は無視する | Play it ❯ | |
| xor | ソース画像とデスティネーション画像を排他論理和を使用して合成する | Play it ❯ |
HTML Canvas リファレンス