Animated Color Burst

Tap the Graphic!

Your browser doesn't support the canvas element.

This animated burst of color was generated with html5 and JavaScript. Learn to add swirling colors to your Website or online game. See free tutorials for Web development and design Introduction to Radial Gradients.

Alternating Circles

As circles overlap they alternate global composite operations and alpha. The section of JavaScript below, demonstrates changing features between animation frames.

Global composite operation source-over and global composite operation lighter alternate. The globalAlpha value alternates between 0.1 and 1.0, in the section of JavaScript, below.

if (nCount == 1){
context.globalCompositeOperation="lighter";
context.globalAlpha=0.1;
}
else if (nCount == 2){
context.globalCompositeOperation="source-over";
context.globalAlpha=1.0;			
}