Canvas globalCompositeOperation Property

Example

Draw 2 rectangles. Red rectangles are destinations. Blue rectangles are sources:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.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);

Try it Yourself »

Description

The globalCompositeOperation property sets or returns how a source are drawn over a destination.

Source = drawings you are about to draw on the canvas.

Destination = drawings that are already drawn on the canvas.

Syntax

context.globalCompositeOperation = "value"

Property Values

Value	Description	Play it
source-over	Default Displays the source over the destination	Play it »
source-atop	Displays the source on top of the destination. The part of the source image that is outside the destination is not shown	Play it »
source-in	Displays the source in the destination. Only the part of the source that is INSIDE the destination is shown, and the destination is transparent	Play it »
source-out	Displays the source out of the destination. Only the part of the source that is OUTSIDE the destination is shown, and the destination is transparent	Play it »
destination-over	Displays the destination over the source	Play it »
destination-atop	Displays the destination on top of the source. The part of the destination that is outside the source is not shown	Play it »
destination-in	Displays the destination in the source. Only the part of the destination that is INSIDE the source is shown, and the source is transparent	Play it »
destination-out	Displays the destination out of the source. Only the part of the destination that is OUTSIDE the source is shown, and the source is transparent	Play it »
lighter	Displays the source + the destination	Play it »
copy	Displays the source. The destination is ignored	Play it »
xor	The source is combined by using an exclusive OR with the destination	Play it »

Example

All the globalCompositeOperation property values:

Try it Yourself »

Browser Support

The <canvas> element is an HTML5 standard (2014).

globalCompositOperation is supported in all modern browsers:


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

❮ Canvas Reference