Search code examples
fabricjs

How to add border to the image as polygon/round shaped

We are building the shapes for conveyors, Is there any way to create a rounded border for the images? The below images, which are png files, have square borders around the selected Images. While Searching we found this code from the link

CSS Border on PNG image with transparent parts

img{
    -webkit-filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
    filter:drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
}

Is there any way to add drop-shadow to the images in canvas? Kindly help us with relevant codes and suggestions.

enter image description here

Solution

  • I did this by the properties shadow and strokeWidth(in css by adding shadow). So that image will be like this.

    item.strokeWidth = 15;               
item.shadow = new fabric.Shadow({color:'red',blur:15,affectStroke:true});

    Present Output:

    enter image description here

    If someone has a better solution kindly brainstorm me.