JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://placehold.it/100x100/" id="source" />
<img id="destination" />
<canvas id="can" width="100" height="100"></canvas>

CSS

body {
    background-color:#CCFFCC;
}

JavaScript

var src=document.getElementById("source"),
    des=document.getElementById("destination"),
    can=document.getElementById("can"),
    ctx=can.getContext("2d");
ctx.drawImage(src,0,0);
ctx.save();
ctx.globalCompositeOperation="destination-out";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(10,0);
ctx.arcTo(0,0,0,10,10);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(100,0);
ctx.lineTo(90,0);
ctx.arcTo(100,0,100,10,10);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(0,90);
ctx.arcTo(0,100,10,100,10);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(90,100);
ctx.arcTo(100,100,100,90,10);
ctx.closePath();
ctx.fill();
ctx.restore();
/* The following operation is not allowed due to COR */
des.src=can.toDataURL("image/png");