html 5 lienzo javascript lluvia animación (cómo implementar de manera eficiente y fácil!)

Probé ambos en lienzo y no se mostró nada, también dudo que sea incluso eficiente: /. Estoy tratando de hacer que la lluvia caiga por la pantalla ... Me pregunto cuál es la forma más eficiente de hacerlo. Soy un principiante en animación y realmente agradecería ayuda.

Sospecho que sería mejor crear un objeto de lluvia, cada uno con la calidad de bajar la pantalla y luego llegar a la parte superior y luego una matriz con ellos ... tal vez con valores de x aleatorios dentro del ancho del lienzo y valores de y de 0 pero yo No sé cómo implementar eso. ¡Por favor ayuda!

                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();
    }

Respuestas a la pregunta(2)

Su respuesta a la pregunta