html 5 canvas javascript animacja deszczu (jak efektywnie i łatwo wdrożyć!)

Wypróbowałem oba te elementy na płótnie i nic nie pokazywałem, również wątpię, aby był on nawet wydajny: /. Próbuję zrobić deszcz na ekranie. Zastanawiam się, jaki jest najbardziej skuteczny sposób. Jestem początkującym animatorem i naprawdę doceniam pomoc.

Podejrzewam, że najlepiej byłoby stworzyć obiekt deszczu, każdy z jakością zejścia na ekran, a następnie do góry, a następnie tablicę z nimi ... może z losowymi wartościami x z szerokością płótna i wartościami z 0, ale I nie wiem, jak to zrealizować. Proszę pomóż!

                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