CODEWITHSUNDEEP
fabricjs
j roc
j roc

Reputation: 238

Border radius on fabric.js img

Trying to add border radius to imgs on my canvas

const fabricImage = new $FabricImage(resizedImg, {
  id: imageObject.id,
  left: imageObject.left,
  top: imageObject.top,
  scaleX: newWidth / resizedImg.width,
  scaleY: newHeight / resizedImg.height,
  objectCaching: false,
  cornerColor: "#FFF",
  cornerStyle: "circle",
  borderColor: "#B2CCFF",
  borderScaleFactor: 1.5,
  cornerStrokeColor: "#B2CCFF",
  cornerSize: 11,
  transparentCorners: false,
  cornerOpacityWhenMoving: 0.1,
  bgRemoved: false,
  bgHasBeenRemoved: false,
  selectable: true,
  fullWidth: imageObject.width,
  fullHeight: imageObject.height,
  originalUrl: objectUrl,
  clipPath: new $fabric.Rect({
    width: resizedImg.width,
    height: resizedImg.height,
    rx: 20,
    ry: 20,
    originX: "center",
    originY: "center",
  }),  
});

works, but the performance on mobile is TERRIBLE. when i remove

clipPath: new $fabric.Rect({
    width: resizedImg.width,
    height: resizedImg.height,
    rx: 20,
    ry: 20,
    originX: "center",
    originY: "center",
  }),

performance is back to normal. am i missing something? looked at a bunch of questions on here and everyone says clipPath. thanks

Upvotes: 0

Views: 17

Answers (0)

Related Questions