CanvasRenderingContext2D.globalCompositeOperation

CanvasRenderingContext2D.globalCompositeOperationプロパティは、新たな図形を描くときに適用する合成処理の種類を定めます。種類は文字列で、合成やブレンドモードのいずれが用いられるのかを決めます。

なお、Canvas TutorialCompositing and clippingの章をご参照ください。

構文

ctx.globalCompositeOperation = 種類;

種類

globalCompositeOperationプロパティの使い方

つぎに抜き書きした簡単なコードは、描かれたふたつの矩形の重なりをglobalCompositeOperationプロパティによって除いています。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "xor";

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

以下のコードを書き替えると、Canvasの中身がどう変わるか実際に確かめられます。

仕様

仕様 状況 コメント
WHATWG HTML Living Standard
The definition of 'CanvasRenderingContext2D.globalCompositeOperation' in that specification.
Living Standard  
Compositing and blending Level 1 勧告候補  

ブラウザの互換性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (有) (有) (有) (有) (有)
Blend modes ? 20 (20) ? ? ?
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (有) (有) (有) (有) (有) (有)
Blend modes ? ? 20.0 (20) ? ? ?

WebKit/Blinkについての注釈

  • WebKit-とBlink-にもとづくブラウザでは、このプロパティのほかに標準でなく推奨されないメソッドctx.setCompositeOperation()が実装されています。

Geckoについての注釈

  • 初期のCanvas仕様の草案には、値として"darker"が定められていました。しかし、Firefoxはバージョン4で"darker"を除きました(バグ 571532). なお、"darker"に近い効果が得られる値としてdifferenceを使うことについて、ブログ記事の紹介が参考になります。

参考情報

ドキュメントのタグと貢献者

 このページの貢献者: dskmori, FumioNonaka
 最終更新者: dskmori,