JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="150px" height="150px"></canvas>

CSS

body {
 background: #ddd;   
}

#canvas {
 border: 2px solid #fff;   
}

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");


function main() {
    context.clearRect(0,0,150, 150);

    context.font = "18px 'Comic Sans MS'";
    context.textBaseline = "top";
    
    // Save state before path
    context.save();
    
    context.beginPath();
        context.rect(5,5,50,50);
    context.closePath();
  
    context.clip();
    
    context.fillStyle = "#fcc";
    context.fill();
    context.fillStyle = "#000";  
    context.fillText("In Clip",10,10)
        
    // Restore state to before the path.
    context.restore();
    
    context.fillStyle = "#000";
    context.fillText("Out of Clip", 10, 100);
    
}

var loop = setInterval(function () { 
    main();
},(1000/60));