Invisible sprites with requestAnimationFrame

The point of a function passed to requestAnimationFrame which then passes itself back to requestAnimationFrame at its end is not to be a setup-function. It's a drawing-function which gets called over and over again by the browser's rendering engine.

I think what it is supposed to do in your code example is to prepare the canvas for first rendering and schedule the animations for all the objects by calling their animateObjectImage functions which then all create an interval. This is something you only need to do once, not over and over again. And you don't need to call it via requestAnimationFrame. So both instances of the line window.requestAnimationFrame(setup) make no sense. Just call the setup method once when you start the game.

Then there is the problem that you have your calls to context.drawImage not during the requestAnimationFrame function but as part of the setInterval function. That's not how you are supposed to do it! All drawing should happen during requestAnimationFrame, so the web browser can properly integrate the rendering into its own rendering loop. Functions scheduled via setInterval get executed whenever, so they should not contain any canvas drawing.

Now you might wonder: "But I don't know how often the browser calls requestAnimationFrame. How am I supposed to properly time my animations with that function?"

The answer is to separate logic from drawing! A principle that should be obeyed in any well-designed game architecture.

• Have the setInterval function set which frame is the currently displayed frame for that object.
• Have the requestAnimationFrame draw whatever is the currently displayed frame for the object.

You can do that by breaking the animateObjectImage method of your genericObject function pseudo-class into two separate methods setup and draw. The setup method does initialization and schedules the logic (but not the drawing!) and the draw method draws whatever state the logic has set.

function genericObject(objectSpriteSheet, xPosition, yPosition){
    this.objectImage = (function (){
        let newImageObject = new Image()
        newImageObject.src = objectSpriteSheet
        return (newImageObject)
    })()
    // setup function
    this.setup = function(objectImage, frameRate){
        let setIntervalTime = 1000 / frameRate;
        let currentFrame = 1;
        let totalSprites = 8;
        let spriteHeight = objectImage.height;
        let spriteWidth = objectImage.width / totalSprites;
        setInterval(function(){
            currentFrame = (currentFrame + 1) % totalSprites;
            currentFrame++;
        }, setIntervalTime)
    }
    // draw function
    this.draw = function() {
            let screenX = currentFrame * spriteWidth;
            context.drawImage(objectImage, screenX, 0, spriteWidth, spriteHeight, xPosition, yPosition, spriteWidth, spriteHeight);
    }
}

Then in the main program, you have both a setup method and a draw method. The setup method starts the animation loop of the draw method:

function setup() {
    objectsArray.forEach((element) => {
        element.setup(element.objectImage, 9)
    })
    window.requestAnimationFrame(draw)
}

function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height)
    objectsArray.forEach((element) => {
        element.draw()
    })
    window.requestAnimationFrame(draw)
}

And then you initialize your game by calling the setup method when the page has loaded:

window.onload = function(){  
    /* ...all the other initializations... */
    setup();
}  

By the way, there is another problem here that you don't wait with drawing until all the sprites have loaded. But that's another problem for another question.