idk why but when i call the function it returns Uncaught TypeError TypeError: player.animate is not a function tried many things didnt quite work player. animate is a function... idk why it does that. tried to debug but its still no good. would love your help. thanks !

    
    const canvas = document.querySelector('canvas');
    const c = canvas.getContext('2d');
    canvas.width = 1024;
    canvas.height = 576;
    c.fillRect(0 ,0 , canvas.width, canvas.height);
    const gravity = 0.2;
    
    class Sprite {
        constructor({position,velocity,height})
        {
            this.position = position; 
            this.velocity = velocity;
            this.height = height;
        }
        
        draw(){
            c.fillStyle = 'red';
            c.fillRect(this.position.x,this.position.y, 50 , 150 );
        }
        
        update(){
            this.draw()
            this.position.y += this.velocity.y;
            this.velocity.y += gravity;
            if(this.position.y + this.height + this.velocity.y >= canvas.height){
                this.velocity = 0;
            }
            else {this.velocity.y += gravity;}
        } 
    }
    
    
    
    
    const player = new Sprite({
        position :{
        x:0,
        y:0},
        velocity : {
        x : 0,
        y : 10
        }});
    
    const enemy = new Sprite({
        position :{
        x:400,
        y:100},
        velocity : {
        x : 0,
        y : 10}});
    
    console.log(player);
    
      
    function animate() {
        window.requestAnimationFrame(animate);
        c.fillStyle('black');
        c.fillRect(0,0,c.width,c.height);
        player.update();
        enemy.update();
    }
    
    player.animate();
    enemy.animate();

would love your help