HTML and CSS Reference
In-Depth Information
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
NOTE
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.