Заметка

В качестве иллюстрации используется пример с двумя фигурами, где синий квадрат рисуется первым.

· source-over (используется по умолчанию) — новое изображение рисуется по верх старого

· destination-over — новые фигуры рисуются под уже нарисованными

· source-in — отображается только та часть изображения, где фигуры пересекаются. Сверху новое изображение

· destination-in — отображается только та часть изображения, где фигуры пересекаются. Сверху старое изображение

· source-out — отображается только та часть нового изображения, которая не пересекается с другими фигурами

· destination-out — отображается только та часть предшествующего изображения, которая не пересекается с другими фигурами

· source-atop — у нового изображения отображается только та часть, которая пересекается с предшествующими фигурами

· destination-atop — у предшествующего изображения отображается (поверх) только та часть, которая пересекается с новой фигурой.

· lighter — место пересечения фигур изменяет цвет на тот, которые получается путем сложения цветов пересекающихся фигур.

· darker — место пересечения фигур изменяет цвет на тот, которые получается путем вычитания цветов пересекающихся фигур.

· xor — место пересечения фигур прозрачно.

· copy — отображается только новая фигура, все остальное удаляется.

Пример

Javascript

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.globalCompositeOperation="destination-over";