[This documentation is preliminary and is subject to change.]
Gets or sets a value that indicates how source images are drawn onto a destination image.
Syntax
| JavaScript | p = object.globalCompositeOperation |
|---|
Property values
Type: String
copy
-
The source image (A) is copied to the destination image (B). The destination image is ignored.
destination-atop
-
The destination image (B) is copied on top of the source image (A). The destination image is displayed where both images are opaque. The source image is displayed where the source image is opaque and the destination image is transparent. Other regions are transparent.
destination-in
-
The destination image (B) is copied into the source image (A). The destination image is displayed where both the source and destination are opaque. Other regions are transparent.
destination-out
-
The destination image (B) is copied out of the source image (A). The destination image is displayed where the destination is opaque and the source is transparent. Other regions are transparent.
destination-over
-
The destination image (B) is copied over the source image (A). The destination image is displayed where the destination image is opaque. The source image is displayed elsewhere.
lighter
-
The source image (A) is copied plus the destination image (B). The sum of the source image and destination image is displayed. Color values approach 1 as a limit.
source-atop
-
The source image (A) is copied on top of the destination image (B). The source image is displayed where both images are opaque. The destination image is displayed where the destination image is opaque and the source image is transparent. Other regions are transparent.
source-in
-
The source image (A) is copied in to the destination image (B). The source image is displayed where both the source and destination are opaque. Other regions are transparent.
source-out
-
The source image (A) is copied out of the destination image (B). The source image is displayed where the source is opaque and the destination is transparent. Other regions are transparent.
source-over
-
Default. The source image (A) is copied over the destination image (B). The source image is displayed where the source image is opaque. The destination image is displayed elsewhere.
verndorName-operationName
-
Use vendor-specific extensions. Internet Explorer 9 does not uses this attribute.
xor
-
The source image (A) is combined by using an exclusive OR (XOR) with the destination image (B).
Standards information
Remarks
You can copy images directly, or you can apply them depending on the opacity or transparency of the images or by using an XOR operation.
Values are case-sensitive. If you set an unsupported or unrecognized value, globalCompositeOperation retains the previous value.
See also
-
CanvasRenderingContext2D
Send comments about this topic to Microsoft
Build date: 5/3/2012