title: How to add stroke/outline to transparent PNG image in JavaScript canvas
body: <p>What is the easiest way to add an outline/stroke effect to a transparent PNG image using JavaScript canvas?</p>
  
  <p>Most popular <a href="http://evanw.github.io/glfx.js/demo/" rel="noreferrer">image</a> <a href="http://www.pixastic.com/lib/" rel="noreferrer">effect</a> libraries I found does not have stroke effect. The closest solution on StackOverflow I found is <a href="https://stackoverflow.com/questions/22852027/how-to-make-canvas-outline-a-transparent-png-for-on-hover-glow">using blur to give it a glow effect</a> instead of outline stroke.</p>
  
  <p><strong>Original picture</strong></p>
  
  <p>Transparent PNG image that can have multiple separated shapes:</p>
  
  <p><img src="https://i.stack.imgur.com/7JXBD.png" alt="enter image description here"></p>
  
  <p><strong>Resulting image</strong></p>
  
  <p>Transparent image with outline stroke and shadow applied to it.</p>
  
  <p><img src="https://i.stack.imgur.com/vcf6A.png" alt="enter image description here"></p>
  
  <p><strong>The search continues...</strong></p>
  
  <p>I'll update this list as I search for the easiest way to accomplish the stroke effect. Related questions:</p>
  
  <ul>
  <li><a href="https://dsp.stackexchange.com/questions/513/bitmap-border-stroke-alogirthm">Bitmap border stroke alogirthm</a></li>
  <li><a href="https://stackoverflow.com/questions/252709/how-to-produce-photoshop-stroke-effect">How to produce photoshop stroke effect?</a></li>
  <li><a href="https://stackoverflow.com/questions/22852027/how-to-make-canvas-outline-a-transparent-png-for-on-hover-glow">How to make canvas outline a transparent png for on hover glow</a></li>
  </ul>