title: How to apply a border to a transparent image on a canvas?
body: <p>I'm working on transparent images with canvas in html5 and I would like to add borders.</p>
  
  <p>The problem is that the property "Stroke" will not take into account the transparency of the image and will apply it as if it were a rect.</p>
  
  <p>Example:</p>
  
  <p><a href="https://i.stack.imgur.com/3Hb8F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3Hb8F.png" alt="enter image description here"></a></p>
  
  <p>Of course, this image contains transparency.</p>
  
  <p>I can get the result I want with imagemagick:</p>
  
  <p><a href="https://i.stack.imgur.com/6Ptob.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6Ptob.png" alt="Example border image with imagemagick"></a></p>
  
  <p>I only use png images.
  <strong>I want to use the canvas in HTML to perform this operation.</strong>
  I use vue-konva but I can also stay on native canvas if you have solutions to offer to me ...</p>