Easy Tutorial
❮ Prop Audio Controls Prop Textarea Require ❯

HTML Canvas globalCompositeOperation Property

Canvas Object

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 over the destination image.
source-atop The source image is displayed at the 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 over the source image.
destination-atop The destination image is displayed at the 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 the destination image using the XOR operation.

Example

All globalCompositeOperation property values:


Canvas Object

❮ Prop Audio Controls Prop Textarea Require ❯