I’m trying to create a simple Google dino game but I’m only getting the title of the game and a gray box

I’m new to JavaScript and I’m trying to create a simple Google dino game but I have been facing problems in that I can’t see the dinosaur nor the cacti. Upon opening the live server for the HTML file and get into the new window for the game, I clicked inspect on the window to see what exactly the error was at. The errors are found on the lines in which I use context.drawImage as shown below:

//dino
    velocityY += gravity; //velocity of jumping upwards weighed down with gravity
    dino.y = Math.min(dino.y + velocityY, dinoY); // applies gravity to current dino.y, so that dino doesn't exceed ground level
    context.drawImage(dinoImg, dino.x, dino.y, dino.width, dino.height);

    //cactus
    for (let i = 0; i <= cactusArray.length; i++) {
        cactusArray[i].x += velocityX;
        context.drawImage(cactusArray[i].img, cactusArray[i].x, cactusArray[i].y, cactusArray[i].width, cactusArray[i].height);

        if (detectCollision(dino, cactusArray[i])) {
            gameOver = true;
            dinoImg.src = "./img/dino-dead.png";
            dinoImg.onload = function() { 
                context.drawImage(dinoImg, dino.x, dino.y, dino.width, dino.height);
            }
        }
    }

In addition, these errors only occurred in function update(){…}

I have already ensured that all the images are placed correctly into the same folder. Moreover, I placed console.log(“Dino image loaded”); the line before context.drawImage. Even then, the message was not logged, so I do believe that there might be an issue with the image path or loading process.