JSFiddle - React, Tailwind, and code Playground

by DeepakKamat

HTML

<body onload='loadstart()'>

    <canvas id='mycan' width='200px' height='180px'></canvas>
    
</body>

CSS

canvas {background-color:yellow;border:3px solid brown;display:block;margin:0 auto;}

JavaScript

function loadstart() {
var canvas = document.getElementById('mycan');
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
 
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);
 
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }