JSFiddle - React, Tailwind, and code Playground

by dariusk

HTML

<!doctype html>
<html>
  <script type='text/javascript'>
    var canvas = null;
    function onload() {
      canvas = document.getElementById('gameCanvas');
      resize();
    }
    function resize() {
      canvas.width = canvas.parentNode.clientWidth;
      canvas.height = canvas.parentNode.clientHeight;
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = '#000000';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#333333';
      ctx.fillRect(canvas.width/3, canvas.height/3, canvas.width/3, canvas.height/3);
    }
  </script>
<body onresize='onresize()' onload='onload()' style='position: absolute; padding:0; margin:0; height: 100%; width:100%'>

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

</body>
</html>