HTML and CSS Reference
destination-in - Only the portion of the destination object that is also in the source
element is displayed.
source-out - Only the portion of the source element that does not overlap the
destination element is displayed.
destination-out - Only the portion of the destination element that does not overlap the
source element is displayed.
source-atop - The source is displayed on top of the destination element but the entire
shape is clipped by the destination element.
destination-atop - The source is displayed beneath the destination element but the
entire shape is clipped by the source element.
xor - Only the portions of the source and destination elements that do not overlap
copy - The name is misleading. This draws the source elements and clears everything else.
lighter - This draws both the source and destination elements and the overlapping area
is displayed in a lighter color. The actual color is determined by adding the color values of
the source and destination elements.
darker - draws both the source and destination elements and the overlapping area is
displayed in a darker color. The actual color is determined by subtracting the color values
of the source and destination elements.
Ti ■ some of the names of these compositing options may not be very intuitive. I suggest that you keep this
figure handy to refer to later in case you don't remember what copy does, for example.
In this chapter, you used the canvas element to create some graphical web pages. You used rectangles and paths
to draw shapes on the canvas. You also included images on your the canvas. One of the really powerful features
of canvas is the ability to apply transformations. The appropriate use of transformations can really simplify some
complex drawing applications.
Canvas is fundamentally very different from SVG. In SVG, each shape is a separate DOM node. This provides
two important features that you cannot do with canvas:
Attach event handlers to individual shapes
Individual shapes can be manipulated. A good example of this is defining the :hover
pseudo rule, which allows the shape's attributes to be changed when the mouse is
hovered over it.
In contrast to SVG, canvas is pixel based, which means it is resolution dependent. Notice that all of the drawing
commands used pixel locations or sizes. When you draw a shape on a canvas element, the pixels of that canvas
are adjusted as appropriate and all that is remembered in the resulting pixel content.
Canvas will tend to be more efficient because of its raw pixel manipulation. SVG on the other hand must
perform a lot of rendering (and re-rendering). However, larger images with less dense content, such as maps,
will generally perform better in SVG.