Javascript свойство globalCompositeOperation

Свойство globalCompositeOperation устанавливает/возвращает то, как исходное (новое) изображение нарисовано на целевом (существующем) изображении.

исходное изображение = рисунок, который вы планируете поместить на холсте.

целевое изображение = рисунок, который уже размещен на холсте.

Значение по умолчанию: source-over
JavaScript синтаксис: context.globalCompositeOperation="source-in";

Возможные значения

Значение Описание
source-over Значение по умолчанию. Исходное изображение накрывает целевое
source-atop Исходное изображение накладывается поверх целевого. При этом часть исходного изображения, которая выходит за границы целевого изображения, не отображается
source-in Исходное изображение отображается внутри целевого изображения. При этом отображается только та часть исходного изображения, которая находится в границах целевого изображения. Само целевое изображение становится прозрачным
source-out Исходное изображение отображается вне границ целевого изображения. При этом отображается только та часть исходного изображения, которая находится за пределами целевого изображения. Само целевое изображение становится прозрачным
destination-over Целевое изображение накрывает исходное
destination-atop Целевое изображение накладывается поверх исходного. При этом часть целевого изображения, которая выходит за границы исходного изображения, не отображается
destination-in Целевое изображение отображается внутри исходного изображения. При этом отображается только та часть целевого изображения, которая находится в границах исходного изображения. Само исходное изображение становится прозрачным
destination-out Целевое изображение отображается вне границ исходного изображения. При этом отображается только та часть целевого изображения, которая находится за пределами исходного изображения. Само исходное изображение становится прозрачным
lighter Отображает исходное изображение + целевое изображение
copy Отображает исходное изображение. Целевое изображение игнорируется
xor Исходное изображение комбинируется с целевым используя операцию исключающего ИЛИ

Пример №1

Нарисуем прямоугольники используя два разных значения globalCompositeOperation. Красный прямоугольник — целевое изображение. Синий прямоугольник — исходное изображение:

source-over
destination-over
Ваш браузер не поддерживает HTML5 тег 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);

Все значения свойства globalCompositeOperation: