HTML and CSS Reference
//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 globalComposite
Operation 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 the newly drawn shapes un-
der the current Canvas bitmap, and that the globalAlpha property only affects shapes
that are drawn after it is set. This means we don't have to save() and restore() the
Canvas state to set the next drawn shape to a new transparency value.
In the next section, we will look at some transformations that affect the entire canvas.
As a result, if we want to transform only the newly drawn shape, we will have to use
the save() and restore() functions.
Simple Canvas Transformations
Transformations on the canvas refer to the mathematical adjustment of physical prop-
erties of drawn shapes. The two most commonly used shape transformations are scale
and rotate, which we will focus on in this section.