JSFiddle - React, Tailwind, and code Playground

by Bartosz Zieliński

HTML

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

JavaScript

var canvas = document.getElementById("canv");
var ctx = canvas.getContext("2d");
ctx.fillStyle="#000";
ctx.fillRect(0,0,500,500);

var r = 100;
ctx.beginPath();
ctx.moveTo(200,100);
ctx.arcTo(300,100,300,200,r);
ctx.arcTo(300,300,200,300,r);
ctx.arcTo(100,300,100,200,r);
ctx.arcTo(100,100,200,100,r);
ctx.fillStyle="#fff";
ctx.fill();
ctx.clip();
ctx.fillStyle="#000";
ctx.fillRect(50,50,300,150)