Add style to `clipPath` Fabric.js Object

Question

I need a canvas with a specific shape. I was able to do so thanks to this post using clipPath. The problem is I can't style it at all.

Here an example with a circle shaped canvas. I try to apply the same style to the object inside the container and to the container itself, but as you can see only the object inside the container is styled. How can I apply a stroke or a shadow to this circle container (clipPath)?

const canvas = new fabric.Canvas("canvas", {backgroundColor: "#d3d3d3"})

const container = new fabric.Circle({
  radius: 150,
  left: 50,
  top: 50,
  stroke: "rgba(0, 0, 0, 0.5)",
  strokeWidth: 1,
})

const obj = new fabric.Rect({
  width: 100,
  height: 100,
  left: 150,
  top: 150,
  fill: "blue",
  stroke: "rgba(0, 0, 0, 0.5)",
  strokeWidth: 1,
})

const shadow = new fabric.Shadow({
  color: "rgba(0, 0, 0, 0.5)",
  blur: 10,
})

container.set("shadow", shadow)
obj.set("shadow", shadow)

canvas.clipPath = container
canvas.add(obj)

canvas.requestRenderAll()

#canvas {
  background: #e8e8e8;
}

[EDIT] I found a company who does that: https://www.plaqueomatic.fr/plaqueomatic/plastique. They use fabric v3.6.0. How can I achieve the same?

user_7693185 · Answer

When clipping the canvas itself, styles like dropshadows are best applied using CSS. I've also enabled the controlsAboveOverlay property to make the resizing controls visible outside the clippath (feel free to disable if you don't need that).

const canvas = new fabric.Canvas("canvas", {
  backgroundColor: "#d3d3d3",
  controlsAboveOverlay: true
})

const container = new fabric.Circle({
  radius: 150,
  left: 50,
  top: 50,
  stroke: "rgba(0, 0, 0, 0.5)",
  strokeWidth: 1,
})

const obj = new fabric.Rect({
  width: 100,
  height: 100,
  left: 150,
  top: 150,
  fill: "blue",
  stroke: "rgba(0, 0, 0, 0.5)",
  strokeWidth: 1,
})

const shadow = new fabric.Shadow({
  color: "rgba(0, 0, 0, 0.5)",
  blur: 10,
})

obj.set("shadow", shadow)

canvas.clipPath = container
canvas.add(obj)

canvas.requestRenderAll()

#canvas {
  -webkit-filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.5));
}

Add style to `clipPath` Fabric.js Object

1 Answers