Help with canvas and Javascript problem

[Eclissi]

I'm working on a game to play in canvas, and was wanting to add some ambiance to a background layer using my javascript. To start, here is my code...
 

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext("2d");
  var x = canvas.width/2;
  var y = canvas.height-150;
  var dx = Math.random() * (-5 * 5) + 15;
  var dy = -15;

  function drawDot() {
      ctx.beginPath();
      ctx.arc(x, y, 10, 0, Math.PI*2);
      ctx.fillStyle = "black";
      ctx.fill();
      ctx.closePath();
  };

  function move() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawDot();
      x += dx;
      y += dy;
  };
setInterval(move, 50);

If you run that, you can see that what I have is a black ball (place holders) that moves up in a random position off of the page in a conal shape. What I need help with is what is the best way to: 
A. Populate it with more balls (maybe like 4-5) and
B. Make it so those 4-5 balls are constantly animating inside the random trajection and off the page (kind of like a fountain spurting).

Would it be best to store each ball as an object into an array, and then run it through a for or while loop?
Thank you for any help with this!

[mattstyles]

What you’re after is simply a particle emitter.

There are loads of info on particle emitters but I'll try and summarise a simple situation that would fit:

Your particle emitter needs an origin location and it'll need someway of keeping track of the balls, lets use 2 lists, an alive list and a dead list. When your emitter starts create all the balls you need (say, 5) and place them into the dead list. Create a tick (you've used setInterval, but requestAnimationFrame will probably be better), lets call it the update tick, on each tick you iterate over the list of alive balls and update their positions, you’ve already got a crude movement algorithm working, and at this stage in our example we have no alive balls.

Every 20 update ticks (use whatever interval you like), we’ll check if there are any dead balls, if there are any, then we'll grab one, initialise it and place it into the alive list. At the initialisation phase we'll place it at the emitter origin and give it a direction. The update tick now sees an alive ball and updates its position. When 20 ticks occur you'll have one moving ball and we'll grab another dead one and breathe life into it.

When an alive ball goes out of the screen then we'll call it dead and move it into the dead list.

Now simply repeat and you'll have an emitter that spits a few balls up on linear paths.

Depending on your exact needs this may be enough, but, its easy to extend.

Go crazy, have the emitter origin move also so each new ball gets a new position. Maybe add a 'jitter' to the initial ball position i.e. select a random point close to the emitter origin. Add opacity to the balls so that maybe they start at 1 and each tick degrade their opacity by a set amount. Add colour to the balls so that they change colour during the update tick. Give them a life span so they only live for 1 second (or 50 ticks, or whatever). Add gravity or wind i.e. apply a different force to each ball. Use a better movement algorithm that takes a direction and a force, degrade the amount of force each tick or maybe alter the direction. Add collision detection during the update tick so the balls collide with each other or with the environment. Try it with 10000 overlapping, semi-opaque, similarly coloured balls. Have your emitter fire a burst of 20 balls every 50ms or so. Have your emitter fire a new ball each tick.

The possibilities go on and on and on and are only constrained by performance and your imagination.