JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="cv" width="800" height="600"></canvas>

JavaScript

var canvasNode = document.getElementById('cv');
var ctx = canvasNode && canvasNode.getContext('2d');

var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0, 512, 384);
};

image.src = "images/image.png";
var startX = 200;
var startY = 0;

var rectWidth = 150;
var rectHeight = 150;
var radius = 30;

//Main Rect
ctx.rect(startX, startY, rectWidth, rectHeight);

//Right arc
ctx.moveTo(startX+=rectWidth, startY+=(rectHeight/2));
ctx.arc(startX, startY, radius, 3 * Math.PI / 2, Math.PI / 2, false);

//Left arc
ctx.moveTo(startX-=(rectWidth / 2), startY+=(rectHeight / 2));
ctx.arc(startX, startY, radius, 0, Math.PI, true);

ctx.moveTo(startX-=(rectWidth / 2), startY-=(rectWidth / 2));
ctx.arc(startX, startY, radius, 3 * Math.PI / 2, Math.PI / 2, false);

//ctx.clip();

ctx.stroke();