JSFiddle - React, Tailwind, and code Playground

by Ilhom Maksadkulov

HTML

<body onload="init();">
  <div class="wrapper">
    <canvas id="myCanvas" width="400" height="200">
      <p>Your browser does not support canvas</p>
    </canvas>
  </div>

</body>

CSS

.wrapper {
  width: 400px;
  margin: auto;
}

#myCanvas {
  border: 1px solid #f00;
}

JavaScript

var c;
 var ctx;

 function init() {
   c = document.getElementById('myCanvas');
   ctx = c.getContext('2d');
   draw();
 }

 function draw() {
   ctx.fillStyle = '#f00';
   ctx.fillRect(30, 30, 50, 50);
 }