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の中身がどう変わるか実際に確かめられます。

仕様

仕様 状況 コメント
HTML Living Standard
CanvasRenderingContext2D.globalCompositeOperation の定義
現行の標準  
Compositing and Blending Level 1 勧告候補  

ブラウザの互換性

BCD tables only load in the browser

WebKit/Blinkについての注釈

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

Geckoについての注釈

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

参考情報