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;
    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;
        setTimeout( update, 1000 / 60 );
    }
    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.drawImage(img, frame*96, 0, 96, 54,
                          canvas.width/2 - 48, canvas.height/2 - 48, 96, 54);
        }
    }
    
    var frame = 0;
    
    function update() {
      console.log('hi');
        redraw();
        frame++;
        if (frame >= 6) frame = 0;
        setTimeout( update, 1000 / 60 );
    }

  </script>
  </head>

  </script>
<body onresize='onresize()' onload='onload()' style='position: absolute; padding:0; margin:0; height: 100%; width:100%'>

<canvas id="gameCanvas"></canvas>

</body>
</html>