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