HTMLキャンバス globalCompositeOperation 属性

HTML5 Canvas リファレンスマニュアル

定義と使用法

globalCompositeOperation 属性設定または返却値は、新しいソース（新しい）画像をターゲット（既存の）画像にどのように描画するかを定義します。

ソース画像 = あなたがキャンバスに配置しようとする描画です。

ターゲット画像 = あなたがキャンバスに配置した描画です。

インスタンス

例 1

異なる globalCompositeOperation 値を使用して矩形を描画します。赤い矩形はターゲット画像です。青い矩形はソース画像です：

　　　　　source-over 　　　　　　　　　　　destination-over

ブラウザは canvas タグをサポートしていません。

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);

自分で試してみてください

例 2

すべての globalCompositeOperation 属性値：

自分で試してみてください

文法

context.globalCompositeOperation="source-in";

属性値

値 説明
source-over デフォルト。ターゲット画像上にソース画像を表示します。
source-atop ターゲット画像の上にソース画像を表示します。ターゲット画像の外に位置するソース画像の部分は見えません。
source-in ターゲット画像の中にソース画像を表示します。ターゲット画像内のソース画像の部分のみ表示され、ターゲット画像は透明です。
source-out ターゲット画像の外にソース画像を表示します。ターゲット画像の外のソース画像の部分のみ表示され、ターゲット画像は透明です。
destination-over ソース画像の上にターゲット画像を表示します。
destination-atop ソース画像の上にターゲット画像を表示します。ソース画像の上のターゲット画像の部分は表示されません。
destination-in ソース画像の中にターゲット画像を表示します。ソース画像の中のターゲット画像の部分のみが表示され、ソース画像は透明です。
destination-out ソース画像の外にターゲット画像を表示します。ソース画像の外のターゲット画像の部分のみが表示され、ソース画像は透明です。
lighter ソース画像 + ターゲット画像を表示します。
copy ソース画像を表示します。ターゲット画像は無視します。
xor ソース画像とターゲット画像をXOR演算で組み合わせます。

技術的詳細

デフォルト値： source-over

ブラウザのサポート

表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注記：Internet Explorer 8 以降のバージョンでは <canvas> 要素がサポートされていません。

HTML5 Canvas リファレンスマニュアル