JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="pt-br">
    
    <head>
        <meta charset="utf-8" />
        <link type="text/css" rel="stylesheet" href="CSS/stylesheet.css" />
        <title>GAME TEST</title>
    </head>
    
    <body>
        <script type="text/javascript" src="js/engineTest.js"></script>
        <script type="text/javascript" src="js/controller.js"></script>
    </body>

</html>

JavaScript

function main() {
    var game = new Canvas(110, 200, game, 10);


    spritesheet3 = new SpriteSheet('http://1.bp.blogspot.com/-O0xS_Msi_D4/TorCphF6AmI/AAAAAAAAAIM/VmqFAlqqbag/s1600/Eagle_Walk.png', 93.5, 161);
    walk3 = new Animation(spritesheet3, 3, 0, 23, game);


    run();
}

window.onload = main();


// executa o loop 
function run() {
    update(); // chama a funçao update.
    render(); // chama a funçao render.

    window.requestAnimationFrame(run);
}

// atualiza as informaçoes 
function update() {

    walk3.update();

}

// renderiza os graficos 
function render() {
    walk3.draw(12.6, 12.6);



}


// cria o canvas.

function Canvas(cWidth, cHeigth, canvasID, M) {

    this.canvas = document.createElement('canvas');

    // Se uma altura/largura nao forem setados, o tamanho da tela é usado com base para o canvas.
    // M - ajusta a margem.
    this.canvas.width = cWidth - M || window.innerWidth - M;
    this.canvas.height = cHeigth - M || window.innerHeight - M;


    this.context = this.canvas.getContext('2d');

    this.canvas.style.border = "1px solid";
    this.canvas.id = canvasID; // or use name

    document.body.appendChild(this.canvas);

}

// Armazena o sprite Sheet.

function SpriteSheet(path, frameWidth, frameHeight) {
    this.image = new Image();
    this.frameWidth = frameWidth;
    this.frameHeight = frameHeight;

    // calculate the number of frames in a row after the image loads
    var self = this;
    this.image.onload = function () {
        self.framesPerRow = Math.floor(self.image.width / self.frameWidth);
    };

    this.image.src = path;
}

// Anima o Sprite Sheet.

function Animation(spritesheet, frameSpeed, startFrame, endFrame, canvas) {

    var animationSequence = []; // array holding the order of the animation
    var currentFrame = 0; // the current frame to draw
    var counter = 0; // keep track of frame rate

    // create the sequence of frame numbers for the animation
    for (var frameNumber = startFrame;...