例
二つの異なる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);
»それを自分で試してみてください ブラウザのサポート
Internet Explorer 9のは、Firefoxの、オペラ、クロム、およびSafari globalCompositeOperationプロパティをサポートしています。
注：Internet Explorer 8の以前のバージョンをサポートしていない<canvas>要素を。
定義と使用法
globalCompositeOperationプロパティセットまたはソース（新しい）イメージが先（既存の）画像上に描画される方法を返します。
クラス= "notranslate"ソース画像=あなたがキャンバスに配置しようとしていた図面。
destination image =既にキャンバス上に配置されている図面。
| デフォルト値： | ソースオーバー |
|---|---|
| JavaScriptシンタックス： | context.globalCompositeOperation="source-in"; |
プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| source-over | デフォルト。 先の画像の上にソースイメージを表示 | それを再生します» |
| source-atop | デスティネーションイメージの上にソース画像を表示します 。先の画像の外側にあるソース画像の一部を省略しています | それを再生します» |
| source-in | デスティネーションイメージにソースイメージを表示します 。 先の画像INSIDEであるソース画像の一部のみが示されており、 先の画像は透明で | それを再生します» |
| source-out | 先の画像のうち、 ソース画像を表示します 。 先の画像の外側にあるソース画像の一部のみが示されており、 先の画像は透明で | それを再生します» |
| destination-over | 元画像の上に 先の画像を表示します | それを再生します» |
| destination-atop | ソースイメージの上に先の画像を表示します 。 ソースイメージの外にあるデスティネーション画像の一部を省略しています | それを再生します» |
| destination-in | ソースイメージに宛先の画像を表示します 。 ソース画像内部にある宛先イメージの一部のみが示されており、 ソース画像は、透明です | それを再生します» |
| destination-out | ソースイメージのうち、 先の画像を表示します 。 ソース画像の外側であるデスティネーションイメージの一部のみが示されており、 ソース画像は、透明です | それを再生します» |
| lighter | 元画像 + 先の画像を表示します | それを再生します» |
| copy | ソース画像を表示します。 デスティネーションイメージは無視されます | それを再生します» |
| xor | ソースイメージは、排他を使用するか、またはデスティネーション画像に合成されます | それを再生します» |
例
すべてのglobalCompositeOperationプロパティ値：
ソースオーバー：
ソース - 頂上：
ソースイン：
ソースアウト：
先オーバー：
宛先頂上：
先情報：
先アウト：
ライター：
コピー：
XOR：