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;
      redraw();
    }
    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, canvas.width/2 - (img.width/2),
                             canvas.height/2 - (img.height/2));
    }
  </script>
<body onresize='onresize()' onload='onload()' style='position: absolute; padding:0; margin:0; height: 100%; width:100%'>

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

</body>
</html>