Drawing on the Canvas - HTML5 Canvas - page 40

destination-over
Destination over the source. Displays the destination image wherever the des-
tination image is opaque. Displays the source image elsewhere.
lighter
Source plus destination. Displays the sum of the source image and destination
image, 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 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
context.globalCompositeOperation = "source-over";
//draw a red square next to the other one
context.fillRect(60, 1, 50, 50);