有没有办法将多个相同的功能放在画布上

Question

我想添加更多的雪花，我曾尝试一次又一次地添加相同的功能，但是如果我想一次拥有100个雪花，那是不切实际的，因此必须有一种更好的方法 这是代码，对不起，一团糟              

    </canvas>
</body>
<script>

var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
var sway = 0;
var swayTimes = 0;

snowFall(100,);

var x = 100;
var y = 100;

function snowFall(time){
console.log(x);
console.log(y);
    setTimeout(function() {
        if(swayTimes == 3){
            swayTimes = 0
            if(sway == 1){ 
                sway = 0; 
                x = 102;
                console.log("bbb")

            }else{
                sway = 1;
                x = 98;
                console.log("aaa")
            }
        }
        swayTimes++;
        if(y >  0){
        ctx.clearRect(0, 0, 1500, 700)
        y += 5;
        ctx.beginPath();
        ctx.fillRect(x, y, 6, 2)
        ctx.fillRect(x+2, y-2, 2, 6)
        ctx.stroke();
        snowFall(time);
        if(y == 700){
            y = 100
        }
        }
    },time); 
}

</script>
</html>