Drawing on the Canvas - HTML5 Canvas - page 39

Other Canvas methods can be used with the clipping region. The most
obvious is the arc() function:
arc( float x, float y, float radius, float startAngle,
float endAngle, boolean anticlockwise)
This can be used to create a circular clipping region instead of a rectan-
gular one.
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 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 cur-
rent Canvas bitmap after both globalAlpha and any transformations have been
applied (see the next section, “Simple Canvas Transformations” on page 41 , 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 else-
where.
destination-out
Destination out source. Displays the destination image wherever the destina-
tion image is opaque and the source image is transparent. Displays transpar-
ency elsewhere.