globalCompositeOperation property
Gets or sets a value that indicates how source images are drawn onto a destination image.
![]() |
Syntax
| JavaScript | |
|---|
Property values
Type: string
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
The source image (A) is copied to the destination image (B). The destination image is ignored.
-
The source image (A) is combined by using an exclusive OR (XOR) with the destination image (B).
-
Specifies no blending. The final color is the source color.
-
Multiplies the source and backdrop colors. Multiplying with black results in a black color. Multiplying with white has no change on the original color.
-
The source color and backdrop colors are inverted, multiplied, and the resulting value is inverted. Multiplying with black has no change on the color. Multiplying with white results in a white final color.
-
The darker color is selected from the backdrop or source color.
-
The lighter color is selected from the backdrop or source color.
-
Multiplies or screens the colors. Multiply is used if the backdrop color is darker. Screen is used if the backdrop color is lighter.
-
The backdrop color is brightened to reflect the source color. A black source color has no change on the final color.
-
The backdrop color is darkened to reflect the source color. A white source color has no change on the final color.
-
Multiplies or screens the colors. Multiply is used if the backdrop color is lighter. Screen is used if the backdrop color is darker. This is similar to shining a harsh spotlight on the backdrop.
-
Similar to hard-light, but softer. Multiplies or screens the colors. Multiply is used if the backdrop color is lighter. Screen is used if the backdrop color is darker. This is similar to shining a diffused spotlight on the backdrop.
-
Subtracts the darker of the colors from the lighter one. A black layer has no change. A white layer inverts the backdrop color.
-
Similar to difference but lower in contrast. A black layer has no change. A white layer inverts the backdrop color.
-
The final color has the saturation and luminosity of the backdrop color and the hue of the source color.
-
The final color as the hue and luminosity of the backdrop color and the saturation of the source color.
-
The final color has the luminosity of the backdrop color and the hue and saturation of the source color. This preserves the gray levels of the backdrop.
-
The final color has the hue and saturation of the backdrop color and the luminosity of the source color.
Standards information
Remarks
Values are case-sensitive. If you set an unsupported or unrecognized value, globalCompositeOperation retains the previous value.
See also
