Change Canvas Shape

What I'd like to achieve: I need to load different images in different canvas, move and resize them and show a preview. I'm using fabricJs. With rectangular canvas everything works

Solution 1:

In reply to @Observer comment:

clipTo is deprecated since v2.0.0. You could achieve this with clipPath (which is more powerful and more flexible than clipTo since it accepts a fabric.Object):

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

const container = new fabric.Rect({
  width: 200,
  height: 200,
  left: 100,
  top: 100,
})

const obj = new fabric.Circle({
  radius: 50,
  left: 150,
  top: 150,
  fill: "blue"
})

canvas.clipPath = container
canvas.add(obj)

canvas.requestRenderAll()

#canvas {
  background: #e8e8e8;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.5/fabric.min.js"></script><canvasid="canvas"width="400"height="400"></canvas>