HTML canvas globalCompositeOperation Property

❮ HTML canvas Reference

Example

// Accessing the element
let c = document.getElementById("myCanvas");

let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(25, 25, 50, 50);
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 50, 50);
ctx.fillStyle = "green";
ctx.fillRect(75, 75, 50, 50);

Meaning

The globalCompositeOperation canvas property sets or returns how a new image is drawn onto an existing image.


Standard Syntax

Default value:

source-over

JavaScript syntax:

context.globalCompositeOperation="source-in";



Browser Support




Status







Property Values

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