JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

(function canvasApp() {

    var theCanvas = document.getElementById('canvas');
    if (!theCanvas || !theCanvas.getContext) {
        return;
    }

    var context = theCanvas.getContext('2d');

    if (!context) {
        return;
    }


    drawScreen();

    function drawScreen() {

        //draw a big box on the screen
        context.fillStyle = "black"; //need list of available colors
        context.fillRect(10, 10, 200, 200);
        context.save();

        context.beginPath();

        //clip the canvas to a 50x50 square starting at 0,0
        context.rect(0, 0, 50, 50);
        context.clip();


        //red circle
        context.beginPath();
        context.strokeStyle = "red"; //need list of available colors
        context.lineWidth = 5;
        context.arc(100, 100, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); // full circle
        context.closePath();
        context.stroke();

        context.restore();

        //reclip to the entire canvas
        context.beginPath();
        context.rect(0, 0, 500, 500);
        context.clip();

        //draw a blue line that is not clipped
        context.beginPath();
        context.strokeStyle = "blue"; //need list of available colors
        context.lineWidth = 5;
        context.arc(100, 100, 50, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); // full circle
        context.closePath();
        context.stroke();
    }

})();