html 5 canvas javascript rain animation (como implementar de forma eficiente e fácil!)

Eu tentei ambos em tela e nada mostrou, também duvido que seja ainda eficiente: /. Eu estou tentando fazer chuva que vem para baixo da tela .. Quer saber qual é a maneira mais eficiente de fazer isso. Eu sou um iniciante em animação e realmente aprecio ajuda.

Eu suspeito que criar um objeto rain seria o melhor, cada um com a qualidade de descer a tela e então chegar ao topo e então um array com eles ... talvez com valores x aleatórios dentro da largura da tela e valores y de 0 mas eu Não sei como implementar isso. Por favor ajude!

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

questionAnswers(2)

yourAnswerToTheQuestion