JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <script>
function draw() {
  var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    
    var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
  	lingrad.addColorStop(0, 'red');
  	lingrad.addColorStop(0.25, 'orange');
  	lingrad.addColorStop(0.5, 'yellow');
    lingrad.addColorStop(0.75, 'green');
  	lingrad.addColorStop(1, 'blue');
    
    var radgrad = ctx.createRadialGradient(80, 150, 70, 80, 130, 120);
  	radgrad.addColorStop(0, '#A7D30C');
  	radgrad.addColorStop(0.9, '#019F62');
  	radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
    
    var grad = ctx.createLinearGradient(0, 0, 0, 150);
    grad.addColorStop(0.0,'red');
		grad.addColorStop(0.5,'blue');
		grad.addColorStop(1.0,'#ffe800');

    ctx.fillStyle = radgrad;
    ctx.strokeStyle = lingrad;
    ctx.lineWidth = 5;
    ctx.fillRect(25,25,100,100);
    ctx.strokeRect(150,25,100,100);
    ctx.fillStyle = grad;
    ctx.fillRect(275,10,130,130);
}
  </script>
  <style type="text/css">
    canvas {border: 1px solid grey;}
  </style>
</head>
<body onload="draw();" >
  <canvas id="canvas" width="430" height="200"></canvas>
</body>