HTML and CSS Reference
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
Unfortunately context.globalCompositeOperation = "destination-atop" does not work
properly in browsers any more.
As you can see in this example, we have toyed a little with both the globalCompositeOper-
ation 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 under the current Canvas
bitmap and that the globalAlpha property affects only shapes that are drawn after it is set.
This means that we don't have to use the save() and restore() functions for the Canvas
state to set the next drawn shape to a new transparency value.