JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <script>
function draw() {
  var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "green";
    ctx.strokeStyle = 'red';
    ctx.fillRect(25,25,100,100);
    ctx.strokeRect(150,25,100,100);
    ctx.globalAlpha = 0.2;
    ctx.clearRect(150,25,100,100);
    ctx.fillRect(275,10,130,130);
    ctx.clearRect(290,25,100,100);
    ctx.globalAlpha = 1;
    ctx.fillStyle = "#000";
    ctx.font = "16px PT-sans";
    ctx.fillText("fillStyle = 'green'", 20, 160);
    ctx.fillText("strokeStyle = 'red'", 145, 160);
    ctx.fillText("globalAlpha = 0.3", 283, 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>