Why is my js to create raining bowties not working?

I am making a project where I need to make an html canvas with raining bowtie images. Here is my js:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var ok2animate = true;

function Drop() {
    this.x = Math.random() * (canvas.width - 20);
    this.y = -Math.random() * 20;
    this.fallRate = Math.random()*.5+.5;
}
//
Drop.prototype.draw = function () {
  //   this.x;
  // this.y;
  let img = new Image("images.png")
  ctx.drawImage(img, this.x, this.y)
    return (this);
}
//
Drop.prototype.fall = function () {
    this.y += this.fallRate;
    return (this);
}

function animate() {

    // request another animation frame
    if (ok2animate) {
        requestAnimationFrame(animate);
    }

  
        ctx.fillRect(0,0,canvas.width,canvas.height)
    //ctx.clearRect(0, 0, canvas.width, canvas.height);


    for (var i = 0; i < drops.length; i++) {
        drops[i].fall().draw();
    }

}





// an array of objects each representing 1 drop
var drops = [];

// add some test drops
for (var i = 0; i < 10; i++) {
    drops.push(new Drop());
}
setInterval(function(){requestAnimationFrame(animate)}, 1000)
requestAnimationFrame(animate)
<canvas id="canvas" width=300 height=300></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How do I make it so the images rain down at 1 second intervals?
(I have included the image file in the same folder)
I have tried using an image file from the web, using a bigger canvas, uwing other versions of jquery, but none of those worked.