JSFiddle - React, Tailwind, and code Playground

by cabanier

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 c = $("#c1")[0].getContext("2d");
c.drawImage($("#ducky")[0], 20, 20, 220, 120 );

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

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

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

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