The elements you're dealing with are raindrops. Before we update or animate a single raindrop, we produce them. We're building out a so called object literal module called rain  (it's an object literal) that knows how to produce raindrops and that keeps the individual drops save in an array called items. It will look like so: 

var rain = {
    items: [],
    maxDrops: 200,
    getDrop: function() {
      var obj = {};
      obj.xStart = Math.floor(Math.random() * canvas.width);
      obj.yStart = Math.floor(Math.random() * -canvas.height);
      obj.x = null;
      obj.y = null;
      obj.speed = Math.round(Math.random() * 2) + 5;

      return obj;
    },
    updateDrop: // see below
    }

The rain object consists of this as yet empty array items that will hold all the raindrop objects we produce and a variable called maxDrops, confining the number of raindrops (the length of items) to 200 in this case. This can be considered light rain. Crank this up to a higher number if you want to drown the tree or test the app's performance. As we like the tree and shall test performance in an example to come, 200 will do for now.

Two functions will help to produce and update the drops. getDrop() assigns start positions out of sight above the canvas, as well as empty x and y positions which will be filled on update. You also define the speed of the drop, which can take on values between five and seven. The speed will be the number of pixels the raindrop will move forward on each update. A low number will produce slow rain and a higher number will produce fast rain.

The updateDrop() function can be called in case we, well, want to update a drop's position. Let's do this now.