[SOLVED] How do I slowdown my sprite animation in JavaScript Canvas?

How do I slowdown my sprite animation in JavaScript Canvas?

Currently my sprite is moving really fast. I am hoping to slow it down, such as lower the frame per second. I have tried using setInterval() in various places but none seems to work.

Here is the relevant code:

    class Atom {
        constructor(options){
            this.width= 320;
            this.height= 320;
            this.frameX= 0;
            this.frameY= 0;
            this.pos= options.pos;
            this.game= options.game;
            this.img= new Image();
            this.img.src = "sprite.png"
            this.img.onload = () => this.draw()
        }
        draw(ctx){
            drawSprite(this.img, this.width * this.frameX, this.height * this.frameY, this.width, this.height,this.pos[0], this.pos[1], this.width, this.height);
            if (this.frameX < 20 ) {
                this.frameX++;
            } else {
                this.frameX= 0;
            };
        }
    }

    function drawSprite(img, sX, sY, sW, sH, dX, dY, dW, dH) {
        ctx.drawImage(img, sX, sY, sW, sH, dX, dY, dW, dH);
    }

this is ran in my script.js:

//in game.js
Game.prototype.draw= function(ctx) {
        ctx.clearRect(0, 0, Game.DIM_X, Game.DIM_Y);
        
        ctx.fillStyle = "rgba(0, 0, 0, 1)";
        ctx.fillRect(0, 0, Game.DIM_X, Game.DIM_Y);

        this.atom.draw(ctx);
    }
    
// in game_view.js
GameView.prototype.start() {
        this.bindKeyHandlers();
        this.lastTime = 0;
        // start the animation
        requestAnimationFrame(this.animate.bind(this));
    }
GameView.prototype.animate() {

        this.game.draw(this.ctx);
        requestAnimationFrame(this.animate.bind(this));
    }
    
// finally in index.js

document.addEventListener("DOMContentLoaded", function(){
    const canvas = document.getElementById('canvas');
    canvas.width= Game.DIM_X;
    canvas.height= Game.DIM_Y;

    const ctx = canvas.getContext("2d");
    const game= new Game();
    game.draw(ctx);

    new GameView(game, ctx).start();
})

Appreciate for any insight on how to slowdown the frame rate (so the sprite animation slows down) for just one object. I am hoping to avoid slowing down the canvas animation rate so the sprite can move around smoothly.

Solution

I found a solution for this:

//in class Atom constructor:
this.counter = 3;

//in class Atom's draw(ctx) function:
if (this.counter > 0){
            this.counter -=1;
        } else {
            if (this.frameX < 20 ) {
                this.frameX++;
            } else {
                this.frameX= 0;
            };
            this.counter = 3
        }

Hope this save you some time, weary traveller.