title: canvas shadow with globalCompositeOperation[ destination-out ]
body: <p>..Hi there, After a long gap,i again got the opportunity to work with JavaScript and canvas.</p>
  
  <p>here i am trying to draw, transparent image using canvas [ <strong>globalCompositeOperation</strong> ] helps me alot,
  i got success on draw image[img1] and removed a overlapped part of image[ img2 ].</p>
  
  <p><strong><em>search alot but failed :</em></strong>  Wanna try to drop shadow on output of canvas,look like below,</p>
  
  <p><a href="https://i.stack.imgur.com/P1SWA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P1SWA.jpg" alt="enter image description here"></a></p>
  
  <p>Please check out and give me your valuable suggestion OR solution.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.bg').one("load", function() {
  
    var canvas = document.getElementById('canva'),
      context = canvas.getContext('2d'),
      img1 = $('.bg')[0],
      img2 = $('.bgover')[0];
  
    context.drawImage(img1, 0, 0);
    context.globalCompositeOperation = 'destination-out';
    context.beginPath();
    context.drawImage(img2, 10, 10);
    context.closePath();
    //drop shadow -&gt; Doesn't work
    context.shadowBlur = 5;
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;
    context.shadowColor = "black";
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #E7FF00
  }
  .bg {
    background: url() center;
    width: 300px;
    height: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;img class='bg' src="http://www.qdtricks.org/wp-content/uploads/2015/02/hd-wallpapers-for-mobile.jpg" style='display:none'&gt;
  
  &lt;img class='bgover' src="http://spotremoval.coit.com/sites/spotremoval.coit.com/files/styles/stain_sidebar/public/Feces%20Stain%20Removal%20-%20SPOT%20REMOVAL%20GUIDE.png?itok=j6f96IHQ" style='display:none'&gt;
  
  
  &lt;canvas id="canva" width="400" height="400" style="position:absolute;left:0;top:0"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>