HTML5 Canvas [18]
Compositing on the Canvas
Compositing refers to how finely we can control the transparency and layering effects of objects as we draw them to the canvas. There are two attributes we can use to control Canvas compositing operations: globalAlpha and globalCompositeOperation.
globalAlpha
The globalAlpha Canvas property defaults to 1.0 (completely opaque) and can be set from 0.0 (completely transparent) through 1.0. This Canvas property must be set before a shape is drawn to the canvas.
globalCompositeOperation
The globalCompositeOperation value controls how shapes are drawn into the current Canvas bitmap after both globalAlpha and any transformations have been applied (see the next section, Simple Canvas Transformations, for more information).
In the following list, the “source” is the shape we are about to draw to the canvas, and the “destination” refers to the current bitmap displayed on the canvas.
copy
Where they overlap, displays the source and not the destination.
destination-atop
Destination atop the source. Where the source and destination overlap and both are opaque, displays the destination image. Displays the source image wherever the source image is opaque but the destination image is transparent. Displays transparency elsewhere.
destination-in
Destination in the source. Displays the destination image wherever both the destination image and source image are opaque. Displays transparency elsewhere.
destination-out
Destination out source. Displays the destination image wherever the destination image is opaque and the source image is transparent. Displays transparency elsewhere.
destination-over
Destination over the source. Displays the destination image wherever the destination 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);
//now set to destination-atop
context.globalCompositeOperation = "destination-atop";
context.fillRect(1, 60, 50, 50);
//now set globalAlpha
context.globalAlpha = .5;
//now set to source-atop
context.globalCompositeOperation = "source-atop";
context.fillRect(60, 60, 50, 50);
}
Figure 2-11. Canvas compositing example
As you can see in this example, we have toyed a little with both the globalCompositeOperation and the globalAlpha Canvas properties. When we assign the string source-over, we are essentially resetting the globalCompositeOperation back to the default. We then create some red squares to demonstrate a few of the various compositing options and combinations. Notice that destination-atop switches