Shapes Demo
This demo shows some advanced features using multiple groups and
exclusions.
- The outer circle is selected independently from the inner circle.
-
The inner circle area is used twice - once as an exclusion from the
outer circle to create the ring effect, and again as its own area. This
is done by specifying two different groups in its "mapKey" and then
specifying options for both to create the desired effect.
-
The small circle within the ring when highlighed is another exclusion
and shows excluding multiple areas.
-
The rightmost rectangle is selected with the center circle (and has
independent rendering options), but does not itself respond to mouse
events.
With Internet Explorer 6-8, masking is not possible. In this case the
effect is simulated by rendering the masked area with a specific color
that can be defined with the "fillColorMask" option. This option is
ignored when using HTML5 canvases. The default is white, which is used for
the inner circle, and 2nd small circle in the ring is set specifically to
match the color of the ring area.