HTML and CSS Reference
In-Depth Information
Compositing on the Canvas
Compositing
refers to how finely we can control the transparency and layering effects of ob-
jects 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
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
imageisopaquebutthedestinationimageistransparent.Displaystransparencyelsewhere.
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
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
Destination over the source. Displays the destination image wherever the destination im-
age is opaque. Displays the source image elsewhere.
