JSFiddle - React, Tailwind, and code Playground

by dariusk

HTML

<!doctype html>
<html>
  <script type='text/javascript'>
    var canvas = null;
    var img = null;
    var ctx = null;
    var imageReady = false;
    window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame       ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame    ||
                window.oRequestAnimationFrame      ||
                window.msRequestAnimationFrame     ||
                function( callback ){
                  window.setTimeout(callback, 1000 / 60);
                };
    })();
    function onload() {
      canvas = document.getElementById('gameCanvas');
      ctx = canvas.getContext("2d");
      img = new Image();
      img.src = 'http://buildnewgames.com/assets/article/sprite-animation/simba.png';
      img.onload = loaded();
      resize();
    }
    function loaded() {
        imageReady = true;
        prerender();
        requestAnimFrame(update);
    }
    function resize() {
      canvas.width = canvas.parentNode.clientWidth;
      canvas.height = canvas.parentNode.clientHeight;
      redraw();
    }
    function redraw() {
        ctx.fillStyle = '#000000';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        if (imageReady) {
            ctx.save();
            ctx.drawImage(reverseCanvas, frame*96, 0, 96, 54, 
                          (canvas.width/2 - 48), (canvas.height/2 - 48), 96, 54);
            ctx.restore();
        }
    }

    
    var frame = 0;
    var lastUpdateTime = 0;
    var acDelta = 0;
    var msPerFrame = 100;
    
    function update() {
        requestAnimFrame(update);
        var delta = Date.now() - lastUpdateTime;
        if (acDelta > msPerFrame) {
            acDelta = 0;
            redraw();
            frame--;
            if (frame < 0) frame = 5;
        } else {
            acDelta += delta;
        }
        lastUpdateTime = Date.now();
    }

    var reverseCanvas = null;

    function prerender() {
   ...