HTML 5 холст Javascript дождь анимации (как эффективно и легко реализовать!)

Я попробовал оба из них на холсте и ничего не показал, также я сомневаюсь, что это даже эффективно: /. Я пытаюсь сделать дождь, который идет по экрану .. Интересно, что является наиболее эффективным способом сделать это. Я новичок в анимации и буду очень признателен за помощь.

Я подозреваю, что создание объекта дождя было бы наилучшим, каждый с качеством спускается по экрану, затем идет к вершине, а затем с массивом с ними ... возможно со случайными значениями x с шириной холста и значениями y, равными 0, но я не знаю, как это реализовать. Пожалуйста помоги!

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

Ответы на вопрос(2)

Ваш ответ на вопрос