HTML5 Canvas Floating Circles

Question

I am trying to create a floating circles effect using HTML5 and canvas. An example of what I'm going for can be seen on https://layervault.com/ You can see the example by going to the 4th slide (titled "Introducing LayerVault for iOS") in the slider. On that slide, lots of circles are floating up out of the object. So far in my code, I am only able to get 1 circle floating up. Any ideas on the approach I should take?

My Code so far:

$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");

var circleColors = new Array();
circleColors[0]="#f0f";
circleColors[1]="#0f0";
circleColors[2]="#00f";
circleColors[3]="#f00";

function makeCircles() {
    var posX = Math.floor(Math.random()*500);
    var posY = 500;
    var theCircleColor = circleColors[Math.floor(Math.random()*circleColors.length)];

    function renderContent()
    {
        context.save();
        context.fillStyle=theCircleColor;
        context.beginPath();
        context.arc(posX,posY,40,0,2*Math.PI);
        context.fill();
        context.restore();
    }//end function renderContent

    function animationLoop()
    {
        canvas.width = canvas.width;
        renderContent();
        posY -= 5;
        if (posY < -40)
            posY = 500;
        setTimeout(animationLoop, 33);
    }//end function animationLoop


    animationLoop();
}//end function makeCircles

    makeCircles();

});//end document ready

Answer 1

You need to make an array of circles, each circle needs its own X/Y/Color and potentially speed, so they move at different rates.

So each circle will be a javascript object with

{
  posX: someValue,
  posY: someValue,
  color: someValue,
  speed: someValue
};

Then we will add many of those to an array. Here's an example using your code:

var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");

var circleColors = new Array();
circleColors[0] = "#f0f";
circleColors[1] = "#0f0";
circleColors[2] = "#00f";
circleColors[3] = "#f00";

var circles = [];

function makeCircles() {
    for (var i = 0; i < 20; i++) {
        var circle = {
            posX: Math.floor(Math.random() * 500),
            posY: 500,
            color: circleColors[Math.floor(Math.random() * circleColors.length)],
            speed: Math.floor(Math.random()*5)
        };
        circles.push(circle);
    }

    function renderContent() {
        for (var i = 0; i < circles.length; i++) {
            var c = circles[i];
            context.fillStyle = c.color;
            context.beginPath();
            context.arc(c.posX, c.posY, 40, 0, 2 * Math.PI);
            context.fill();
        }
    } //end function renderContent

    function animationLoop() {
        canvas.width = canvas.width;
        renderContent();
        for (var i = 0; i < circles.length; i++) {
            var c = circles[i];
            c.posY -= c.speed;
            if (c.posY < -40) c.posY = 500;
        }
        setTimeout(animationLoop, 33);
    } //end function animationLoop


    animationLoop();
} //end function makeCircles

makeCircles();

And here it is live:

http://jsfiddle.net/vTaLF/