Shadow only with destination-out

by bionicoz

HTML

<canvas id="demo" width="500" height="500"></canvas>

CSS

body{ background:#000}

JavaScript

var ctx = demo.getContext('2d'),
    offset = demo.width;



/// to keep original points of shape we just translate
ctx.translate(-offset, 0);

/// create some shape
ctx.beginPath();
      ctx.moveTo(77.7, 67.6);
      ctx.lineTo(147.8, 64.8);
      ctx.bezierCurveTo(180.5, 63.7, 213.1, 90.4, 213.1, 127.2);
      ctx.bezierCurveTo(213.1, 138.0, 212.3, 150.3, 202.9, 166.3);
      ctx.bezierCurveTo(221.1, 182.5, 229.3, 198.9, 229.6, 220.5);
      ctx.bezierCurveTo(229.8, 263.3, 187.8, 289.8, 164.3, 290.9);
      ctx.lineTo(77.2, 294.1);
      ctx.lineTo(77.2, 247.0);
      ctx.lineTo(155.8, 243.6);
      ctx.bezierCurveTo(187.8, 241.9, 186.1, 198.5, 156.3, 199.8);
      ctx.lineTo(126.5, 200.8);
      ctx.lineTo(126.5, 156.0);
      ctx.lineTo(143.6, 155.0);
      ctx.bezierCurveTo(177.3, 153.8, 175.6, 109.6, 143.3, 111.0);
      ctx.lineTo(77.4, 113.9);
      ctx.lineTo(77.7, 67.6);
ctx.closePath();

/// define shadow, KEY: offset X shadow (or y if prefered=
ctx.shadowOffsetX = offset;
ctx.shadowColor = 'rgba(255,255,255,0.5)';
ctx.shadowBlur = 15;

/// draw the shape
ctx.fill();

/// translate back, or use save/restore
ctx.translate(offset, 0);