Canvas globalCompositeOperation 属性

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-atop 目標画像の上に元画像を表示します。元画像が目標画像の外に位置する部分は見えません。
source-in 目標画像の中に元画像を表示します。目標画像の中の元画像部分のみが表示され、目標画像は透明です。
source-out 目標画像の外に元画像を表示します。目標画像の外の元画像部分のみが表示され、目標画像は透明です。
destination-over 元画像の上に目標画像を表示します。
destination-atop 元画像の上に目標画像を表示します。元画像の外の目標画像部分は表示されません。
destination-in 元画像の中に目標画像を表示します。元画像の中の目標画像部分のみが表示され、元画像は透明です。
destination-out 元画像の外に目標画像を表示します。元画像の外の目標画像部分のみが表示され、元画像は透明です。
ライトナー 元画像 + 目標画像を表示します。
コピー 元画像を表示します。目標画像を無視します。
xor

ソース画像とターゲット画像をXOR演算子を使用して組み合わせます。

技術的詳細 デフォルト値：

ブラウザのサポート

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

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

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

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