I add the stroke to the image using this code snippet

fabric.Image.fromURL('https://mediatours.ca/img/placeholder.jpg', function(img) {
  img.scale(0.2).set({
    left: 10,
    top: 150,
    angle: 0,
    stroke: "#FF0000",
    strokeWidth: 10
  });
  canvas.add(img);
});

and then create a fabric Rectangle for clipping the image

      var rect = new fabric.Rect({
        left: 10,
        top: 20,
        rx: 5
        ry: 5,
        width: 100
        height: 100,
        fill: 'transparent',
        absolutePositioned: true,
        originX: 'center',
        originY: 'center',
        stroke: '#000000',
        strokeWidth: 100,
      });

and then setting the clipPath property to rect

img?.set('clipPath', rect);

This results in output like this (https://i.sstatic.net/f5iZhKr6.png)

Question is how I can make sure that the image also gets rounded border similar to canva

canva reference