This Web Content Runs with HTML5. Read the E-Book

HTML5 Animation

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 examples from the e-book HTML5 Animation with Effects. See More Global Composite Examples.

Learn how to create amazing animated visual effects with the e-book HTML5 Animation with Effects.

HTML5 Animation with Effects explains how to create eight unique VFX for Web pages and online games. Artists and developers can benefit from this short book. HTML5 Animation with Effects demonstrates how to create animation with global composite operations, global alpha, and radial gradients. The book includes digital color concepts, how to add a background graphic, implement audio play back, and simple timing for animation.

Topics Include

See HTML5 Animation with Effects on Amazon. Select a Country from the Menu Below:

More Global Composite Examples

Animated Effects
Copyright © 2015 Seven Thunder Software. All Rights Reserved.