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 to1.0
(completely opaque) and can be set from0.0
(completely transparent) through1.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 bothglobalAlpha
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 ...
Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.