JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <script>
function draw() {
  var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25,25,100,100);
    ctx.strokeRect(150,25,100,100);
    ctx.clearRect(150,25,100,100);
    ctx.fillRect(275,10,130,130);
    ctx.clearRect(290,25,100,100);

    ctx.fillStyle = "#000";
    ctx.font = "16px PT-sans";
    ctx.fillText("fillRec", 50, 160);
    ctx.fillText("strokeRect", 165, 160);
    ctx.fillText("clearRect", 305, 160);
}
  </script>
  <style type="text/css">
    canvas {border: 1px solid grey;}
  </style>
</head>
<body onload="draw();" >
  <canvas id="canvas" width="430" height="200"></canvas>
</body>