JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<script>
function draw() {  
  var ctx = document.getElementById('canvas').getContext('2d');  
  
  ctx.fillRect(0,0,150,150);   // Draw a rectangle with default settings  
  ctx.save();                  // Save the default state  
  
  ctx.fillStyle = '#09F'       // Make changes to the settings  
  ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings  
  
    ctx.save();                  // Save the current state  
  ctx.fillStyle = '#654'       // Make changes to the settings  
     ctx.globalAlpha = 0.5;      
  ctx.fillRect(30,30,90,90);   // Draw a rectangle with new settings  
  
    //ctx.restore();               // Restore previous state  
  ctx.fillRect(45,45,60,60);   // Draw a rectangle with restored settings  
  
    //ctx.restore();               // Restore original state  
  ctx.fillRect(60,60,30,30);   // Draw a rectangle with restored settings  
}  
</script>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>