We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 勧告候補  

ブラウザの互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,