HTML and CSS Reference
In-Depth Information
lighter
Sourceplusdestination.Displaysthesumofthesourceimageanddestinationimage,with
color values approaching
1.0
as a limit.
source-atop
Source atop the destination. Displays the source image wherever both images are opaque.
Displays the destination image wherever the destination image is opaque but the source
image is transparent. Displays transparency elsewhere.
source-in
Source in the destination. Displays the source image wherever both the source image and
destination image are opaque. Displays transparency elsewhere.
source-out
Source out destination. Displays the source image wherever the source image is opaque
and the destination image is transparent. Displays transparency elsewhere.
source-over
(Default.) Source over destination. Displays the source image wherever the source image
is opaque. Displays the destination image elsewhere.
xor
Source
xor
destination. Exclusive
OR
of the source image and destination image.
Example 2-6
shows how some of these values can affect how shapes are drawn to the canvas,
producing
Figure 2-11
.
Example 2-6. Canvas compositing example
function
function
drawScreen
() {
//draw a big box on the screen
context
.
fillStyle
=
"black"
;
//
context
.
fillRect
(
10
,
10
,
200
,
200
);
//leave globalCompositeOperation as is
//now draw a red square
context
.
fillStyle
=
"red"
;
context
.
fillRect
(
1
,
1
,
50
,
50
);
//now set it to source-over
