JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fps">FPS:</div>

JavaScript

var canvasA = document.createElement("canvas");
var canvasB = document.createElement("canvas");

var contextA = canvasA.getContext("2d");
var contextB = canvasB.getContext("2d");

canvasA.style.position = "absolute";
canvasB.style.position = "absolute";

var xpos = 0;
var ypos = 0;
var index = 0;
var frameSizeX = 140;
var frameSizeY = 395;
var numFrames = 20;
var drawing_character = false;
var xPosition = 0;
var now, then, elapsed, startTime, fps, fpsInterval;
var fpscounter = setInterval(updatefps, 1000);
var forw = true;
var cfps = 0;

// Pictures
var background = new Image();
background.src = "http://i.imgur.com/3FDB45h.png";

var character = new Image();
character.src = "http://i.imgur.com/tziJajG.png";

function redraw() {
    contextB.clearRect(0, 0, canvasB.width, canvasB.height);
    contextB.drawImage(background, 0, 0);
}

function drawchar() { // Input= fps max
    requestAnimationFrame(drawchar);

    now = Date.now();
    elapsed = now - then;

    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);
        
        contextA.clearRect(0, 0, 800, 600);  
        
        contextA.drawImage(character,                           
        xpos,
        ypos,
        frameSizeX,
        frameSizeY,
        xPosition,
        0,
        frameSizeX,
        frameSizeY);
         
        xpos += frameSizeX;
        index += 1;
        if (index >= numFrames) {
            xpos = 0;
            ypos = 0;
            index = 0;
        } else if (xpos + frameSizeX > character.width) {
            xpos = 0;
            ypos += frameSizeY;
        }
        
        cfps++;
    }
}

function updatefps() {
    document.getElementById("fps").innerHTML = "FPS: " + cfps;
    cfps = 0;
}

function main() {
    prepareCanvas();
    setInterval(redraw, 1000/60);
    animarchar(20);
    
    setInterval(move, 1);
}

function move() {
    if (forw === true) {
        xPosition += 1;
        if (xPosition === 300){
            forw = false;}
    }...