HTML and CSS Reference
In-Depth Information
WARNING
Elements with shadows are significantly more processor-intensive to draw than elements
without, so use shadows sparingly and consider prerendering effects to an offscreen canvas buffer.
Using Composition Effects
The Canvas context also provides a property called
globalCompositeOperation
, which controls how
Canvas combines existing content with new elements drawn on canvas. The specification defines 11 different
possible values for this property, with the default value
source-over
placing newly drawn elements over the
existing content as you would expect.
Unfortunately as of this writing, consistent cross-browser support for the interesting composite operations is
poor, so this property is something to keep track of as it evolves rather than using it now.
The intended results of each operation, as pulled directly from the specification, are listed in
Table 15-1
.
Table 15-1:
Composite Operations
Operation Description
source-atop
A atop B. Display the source image wherever both images are opaque. Display the destination image
wherever the destination image is opaque but the source image is transparent. Display transparency
elsewhere.
A in B. Display the source image wherever both the source image and destination image are opaque.
Display transparency elsewhere.
source-in
A out B. Display the source image wherever the source image is opaque and the destination image is
transparent. Display transparency elsewhere.
source-out
A over B. Display the source image wherever the source image is opaque. Display the destination im-
age elsewhere.
source-over
(default)
B atop A. Same as
source-atop
but using the destination image instead of the source image and
vice versa.
destination-
atop
B in A. Same
as source-in
but using the destination image instead of the source image and vice
versa.
destination-
in
destination-
out
B out A. Same as
source-out
but using the destination image instead of the source image and vice
versa.
destination-
over
B over A. Same as
source-over
but using the destination image instead of the source image and
vice versa.
A plus B. Display the sum of the source image and destination image, with color values approaching
255 (100%) as a limit.
lighter
copy
A (B is ignored). Display the source image instead of the destination image.
A xor B. Exclusive OR of the source image and destination image.
xor
Safari is unfortunately one of the browsers that doesn't handle a few of these operations correctly, including
incorrect rendering of
"source-in"
,
"source-out"
,
"destination-in"
,
"destination-
atop"
, and
"copy"
.
