Canvas with clipped image and drop shadow

by Arjan Haverkamp

HTML

<canvas id="c" width="800" height="600" style="border:1px dotted gray"></canvas>

JavaScript

/**
 * Why is there no drop shadow???
 */

function drawCircle(ctx,w,h) {
   ctx.beginPath();
   ctx.ellipse(w/2, h/2, w/2, h/2, 0, 2 * Math.PI, false);
   //ctx.stroke();
   ctx.closePath();
}

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {

   drawCircle(ctx, img.width,img.height);
   // Removing ctx.clip() makes the drop shadow appear
   ctx.clip();

   ctx.shadowOffsetX = 4;
   ctx.shadowOffsetY = 4;
   ctx.shadowBlur = 4;
   ctx.shadowColor = '#000';

   ctx.drawImage(img, 0, 0);
}
img.src = 'https://i.imgur.com/NdrmFsr.jpg';