HTML5 Guidelines for Web Developers

5.14 Animations 167

Figure 5.38 Animation with multicolored spheres

Listing 5.3 JavaScript code for animation with multicolored spheres

var canvas = document.querySelector("canvas");
var context = canvas.getContext('2d');
var r,cx,cy,radgrad;

var drawCircles = function() {
// fade existing content
context.fillStyle = 'rgba(255,255,255,0.5)';
context.fillRect(0, 0,canvas.width,canvas.height);

// draw new spheres
for (var i=0; i<360; i+=15) {
// random position and size
cx = Math.random()canvas.width;
cy = Math.random()canvas.height;
r = Math.random()*canvas.width/10.0;

// define radial gradient
radgrad = context.createRadialGradient(
0+(r 0.15),0-(r 0.25),r/3.0,
0,0,r
);
radgrad.addColorStop(0.0,'hsl('+i+',100%,75%)');
radgrad.addColorStop(0.9,'hsl('+i+',100%,50%)');