Animated Global Composite Operations

Free Visual Tool: HTML5 Web Design

Your browser doesn't support the canvas element.

Use this free visual tool to see how global composite operations react with a set of animated colorful circles. Select then view, globalCompositionOperation settings from the drop down Color Composite Options menu.

Functions draw a set of colored circles at random locations with random diameters. Global composite operations apply based on the order each circle displays. Global composite operations compose each circle over the preceding circle. Colors are modified where circles overlap based on the type of operation selected.

The first circle is the destination. The second circle is the source. The third circle becomes a new source. The new source overlays the second circle as a new destination, and so on, until all circles display.

The lighter option offers some great opportunities to create visual effects. The lighter option adds light from color channels in both circles. The Molten Lava Example and Interactive Particle Explosion example apply global composite operation lighter, for beautiful, unique effects. See More Global Composite Examples.

Learn to create amazing radial gradients with free HTML5 tutorials. Also see Interactive Web examples with free tutorials and HTML5 Animation with Effects.

Topics Include

More Global Composite Examples

Copyright © 2015 Seven Thunder Software. All Rights Reserved.