title: html 5 canvas javascript rain animation(how to implement efficiently and easily!)
body: <p>I tried both of these in canvas and nothing showed, also I doubt it is even efficient :/. I am trying to make rain that comes down the screen.. Wondering what is the most efficient way of doing this. I am a beginner at animation and would really appreciate help.</p>
  
  <p>I suspect that creating a rain object would be best, each with the quality of coming down the screen then coming to the top and then an array with them...maybe with random x values withing the canvas width and y values of 0 but I don't know how to implement that. Please help!</p>
  
  <pre><code>                xofRain = 20;
          startY = 0;
          ctx.beginPath();
          ctx.moveTo(xofRain, startY);
          ctx.lineTo(xofRain, startY + 20);
          ctx.closePath();
          ctx.fillStyle = "black"; 
          ctx.fill();
  
  
       function rain(xofRain){
  
          startY = canvas.height();
  
          ctx.moveTo(xofRain, startY);
          ctx.beginPath();
          ctx.lineTo(xofRain, startY + 3);
          ctx.closePath();
          ctx.fillStyle = "blue"; 
          ctx.fill();
      }
  </code></pre>