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.

Return to ImageMapster home