JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" height='400' width='400'></canvas>

CSS

#myCanvas{
    height: 400px;
    width : 400px;
    background : url('https://www.noao.edu/image_gallery/images/d2/m51-400.jpg');
    
}

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.strokeStyle = '#FFF';
context.beginPath();
context.moveTo(0,0);
context.lineTo(0, 100);
context.lineTo(100, 100);
context.lineTo(100, 0);
context.closePath();
context.stroke();
context.strokeStyle = "transparent";
context.arc(300, 100, 75, 0, Math.PI*2, false);

context.fillStyle = "rgba(255, 255, 255, 1)";
context.fillRect(0, 100, 400, 400);
context.fillStyle = "rgba(255, 255, 255, 1)";
context.fillRect(100, 0, 400, 400);