Easy Tutorial
❮ Att Global Class Att Object Form ❯

HTML canvas globalCompositeOperation Property

HTML canvas Reference Manual

Example

Draw rectangles using different globalCompositeOperation values. The red rectangle is the destination image, and the blue rectangle is the source image:

JavaScript:


Browser Support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the globalCompositeOperation property.

Note: Internet Explorer 8 and earlier versions do not support the <canvas> element.


Definition and Usage

The globalCompositeOperation property sets or returns how a source (new) image is drawn onto a destination (existing) image.

Source image = The drawing you intend to place on the canvas.

Destination image = The drawing you have already placed on the canvas.

Default value: source-over
JavaScript syntax: context.globalCompositeOperation="source-in";
--- ---

Property Values

Value Description
source-over Default. The source image is displayed on top of the destination image.
source-atop The source image is displayed on top of the destination image. The part of the source image outside the destination image is not visible.
source-in The source image is displayed inside the destination image. Only the part of the source image inside the destination image is displayed, and the destination image is transparent.
source-out The source image is displayed outside the destination image. Only the part of the source image outside the destination image is displayed, and the destination image is transparent.
destination-over The destination image is displayed on top of the source image.
destination-atop The destination image is displayed on top of the source image. The part of the destination image outside the source image is not visible.
destination-in The destination image is displayed inside the source image. Only the part of the destination image inside the source image is displayed, and the source image is transparent.
destination-out The destination image is displayed outside the source image. Only the part of the destination image outside the source image is displayed, and the source image is transparent.
lighter Displays the source image + the destination image.
copy Displays the source image. Ignores the destination image.
xor Combines the source image and destination image using the XOR operation.

Example

All globalCompositeOperation property values:


❮ Att Global Class Att Object Form ❯