0

I'm working on transparent images with canvas in html5 and I would like to add borders.

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.

Example:

enter image description here

Of course, this image contains transparency.

I can get the result I want with imagemagick:

Example border image with imagemagick

I only use png images. I want to use the canvas in HTML to perform this operation. I use vue-konva but I can also stay on native canvas if you have solutions to offer to me ...

Hyte suke
  • 1
  • 1

1 Answers1

0

Does this helps :

<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
       fill-opacity="0.5" stroke-opacity="0.8"/>
midhun k
  • 546
  • 1
  • 12
  • 28
  • Thank you but it's not really what I want. Your code is to create a rect with a border. I want to add a border to an image containing transparency. – Hyte suke Aug 02 '19 at 10:06