構文

context . globalCompositeOperation [ = value ]

現在の合成処理を返します。後述のリストの通りです。

値をセットして、合成処理を変更することができます。未知の値は無視されます。

仕様

source-atop

A atop B。描画元イメージのうち、両方のイメージが不透明な部分が表示されます。描画先イメージのうち、描画先イメージが不透明で、描画元イメージが透明な部分が表示されます。それ以外の部分は透明となります。

source-in

A in B。描画元イメージのうち、描画元イメージと描画先イメージともに不透明な部分が表示されます。それ以外の部分は透明となります。

source-out

A out B。描画元イメージのうち、描画元イメージが不透明で、描画先イメージが透明な部分が表示されます。それ以外の部分は透明となります。

source-over (default)

A over B。描画元イメージのうち、描画元イメージが不透明な部分が表示されます。それ以外の部分では描画先イメージが表示されます。

destination-atop

B atop A。source-atop と同じですが、描画元イメージの代わりに描画先イメージを使います。

destination-in

B in A。source-in と同じですが、描画元イメージの代わりに描画先イメージを使います。

destination-out

B out A。source-out と同じですが、描画元イメージの代わりに描画先イメージを使います。

destination-over

B over A。source-over と同じですが、描画元イメージの代わりに描画先イメージを使います。

lighter

A plus B。描画元イメージと描画先イメージの重なった部分は、limit として 1 に近づく色の値を使って表示されます。

copy

A (B は無視されます)。描画先イメージの代わりに描画元イメージが表示されます。

xor

A xor B。描画元イメージと描画先イメージの排他的論理和となります。

vendorName-operationName

合成演算子のリストにベンダー独自の拡張を加えたい場合は、この構文を使わなければいけません。

原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-globalcompositeoperation

サンプル

globalCompositeOperationプロパティは、新たに描画したい図形を、すでに描画されている図形と合成するために使います。どのように合成するのかを、globalCompositeOperationプロパティの値にセットします。

上図は、まずcanvas上に青色の矩形を描き、その後、青色の矩形に一部分が重なるように赤色の円を描いたものです。当然、後から描いた赤色の円が、はじめから描かれていた青色の矩形に覆いかぶさるように塗られます。

下図は、赤色の円を描く前に、globalCompositeOperationプロパティに値をセットしたら、どのような結果になるかを表したものです。上の説明における A は赤色の円（対象イメージ）に相当し、B は青色の矩形（描画先イメージ）に相当します。このサンプルでは、結果を分かりやすくするために、各図形にグレーの枠線を描いてあります。

source-atop

描画先イメージの領域のみが表示されますが、対象イメージと重なっている領域は、対象イメージの領域が表示されます。

source-in

描画先イメージと対象イメージが重なった部分だけが表示されます。表示されるのは描画先イメージの領域です。描画先イメージと対象イメージが重なっていない領域は透明になってしまいます。

source-out

描画先イメージと重なっていない部分だけが表示されます。描画先イメージの領域は透明になってしまいます。

source-over

描画先イメージに対象イメージがかぶさるように表示されます。この合成方法がデフォルトです。globalCompositeOperationプロパティに値をセットしなくても、この合成方法でイメージは描画されます。

destination-atop

対象イメージの領域だけが表示されますが、描画先イメージと重なっている領域は、描画先イメージの領域が表示されます。

destination-in

描画先イメージと対象イメージが重なった部分だけが表示されます。しかし表示されるのは対象イメージの領域です。描画先イメージと対象イメージが重なっていない領域は透明になってしまいます。

destination-out

描画先イメージから対象イメージの領域が切り取られた状態で表示されます。対象イメージの領域は透明になってしまいます。

destination-over

対象イメージが描画先イメージの裏に表示されます。

lighter

対象イメージと描画先イメージの両方が表示されますが、重なった領域の色は、それぞれのイメージの色を加算したものとなります。

copy

対象イメージだけが表示され、描画先イメージは透明になってしまいます。

xor

対象イメージと描画先イメージが重なっていない領域のみが表示され、重なった領域は透明になります。

サンプルコード

以上の結果を取り出すために作ったコードは、以下の通りです。

var oprtns = new Array(
  "source-atop",
  "source-in",
  "source-out",
  "source-over",
  "destination-atop",
  "destination-in",
  "destination-out",
  "destination-over",
  "lighter",
  "copy",
  "xor"
);
for(var i=0; i<=10; i++) {
  var canvas = document.getElementById('c'+i);
  if ( ! canvas || ! canvas.getContext ) { continue; }
  var ctx = canvas.getContext('2d');
  /* 元となるイメージを描画（青色の矩形） */
  ctx.fillStyle = "blue";
  ctx.fillRect(10, 10, 60, 60);
  /* 合成演算子をセット */
  ctx.globalCompositeOperation = oprtns[i];
  /* 対象のイメージを描画（赤色の円） */
  ctx.beginPath();
  ctx.fillStyle = "red";
  ctx.arc(60, 60, 30, 0, Math.PI*2, false);
  ctx.fill();
  /* 補助線 */
  ctx.globalCompositeOperation = "source-over";
  ctx.strokeStyle = "#aaaaaa";
  ctx.strokeRect(10, 10, 60, 60);
  ctx.beginPath();
  ctx.arc(60, 60, 30, 0, Math.PI*2, false);
  ctx.stroke();
}

[globalCompositeOperationプロパティの実際のサンプル]

このコードで、補助線を描く際に、あえてglobalCompositeOperationプロパティに "source-over" をセットしている点に注目してください。

一度、globalCompositeOperationプロパティに値をセットしてしまうと、それ以降に描く図形は、すべて、globalCompositeOperationプロパティの影響を受けてしまいます。そのため、新たに図形を描きたい場合は、globalCompositeOperationプロパティに、デフォルト値である "source-over" をセットします。こうすることで、それ以降は、いつも通りの描画ができるようになります。

ブラウザ対応状況