JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display:none">
    <img id="ducky" src="https://raw.github.com/cabanier/SVGOpenKeynote/master/assets/images/ducky.png">
</div>
<p>Just show bitmap</p>
<canvas id="c1" class="cnvs"></canvas>

<p>Calculate outline. This canvas is used in subsequent calculations.</p>
<canvas id="c2" class="cnvs"></canvas>

<p>Show the shadow created form the outline</p>
<canvas id="c3" class="cnvs"></canvas>

<p>Show the actual shadow</p>
<canvas id="c4" class="cnvs"></canvas>

<p>Final result</p>
<canvas id="c5" class="cnvs"></canvas>

CSS

.cnvs
{
    width: 180px;
    height: 180px;
    border: 1px solid black;
}

JavaScript

//var ctx = $("#c1")[0].getContext("2d");
//c.drawImage($("#ducky")[0], 20, 20, 220, 120 );

ctx = $("#c2")[0].getContext("2d");
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 300, 150);
ctx.globalCompositeOperation = 'destination-out';
//c.drawImage($("#ducky")[0], 20, 20, 220, 120 );

//c.fillRect(20, 20, 260, 110);

var w = 200;
	    	var h = 100;
	    	var r = 48;
	    	var c = r * 0.1265;

ctx.translate(20,20);

ctx.beginPath();
	 
	    	ctx.moveTo( 
	    		r, 
	    		0 
	    	);

	    	ctx.lineTo( 
	    		( w - r ),
	    		0
	    	);

	    	ctx.bezierCurveTo(
	    		( w - c ),
	    		0,
	    		w,
	    		c,
	    		w,
	    		r 
    		);

    		ctx.lineTo(
    			w,
    			( h - r )
			);

			ctx.bezierCurveTo(
	    		w,
	    		( h - c ),
	    		( w - c ),
	    		h,
	    		( w - r ),
	    		h 
    		);

    		ctx.lineTo(
    			r,
    			h
			);

			ctx.bezierCurveTo(
	    		c,
	    		h,
	    		0,
	    		( h - c ),
	    		0,
	    		( h - r ) 
    		);

    		ctx.lineTo(
    			0,
    			r
			);

			ctx.bezierCurveTo(
	    		0,
	    		c,
	    		c,
	    		0,
	    		r,
	    		0 
    		);

    		ctx.closePath();
    		ctx.fill();
            ctx.clip();


//ctx = $("#c3")[0].getContext("2d");
ctx.shadowColor = 'black';
ctx.shadowBlur = 8;
ctx.shadowOffsetY = 8;
ctx.drawImage($("#c2")[0], 0, 0, 300, 150);

/*ctx = $("#c4")[0].getContext("2d");
ctx.shadowColor = 'black';
ctx.shadowBlur = 30;
ctx.drawImage($("#c2")[0], 0, 0, 300, 150);
ctx.shadowBlur = 0;
ctx.globalCompositeOperation = 'destination-out';
ctx.drawImage($("#c2")[0], 0, 0, 300, 150 );

ctx = $("#c5")[0].getContext("2d");
ctx.shadowColor = 'black';
ctx.shadowBlur = 30;
ctx.drawImage($("#c2")[0], 0, 0, 300, 150);
ctx.shadowBlur = 0;
ctx.globalCompositeOperation = 'destination-out';
ctx.drawImage($("#c2")[0], 0, 0, 300, 150 );
ctx.globalCompositeOperation = 'destination-over';
ctx.drawImage($("#ducky")[0], 20, 20, 220, 120 );
*/