Create a clipping mask using an object in Fabric.js

Question

I'm trying to create a T-Shirt editor using Fabric. I set a shirt as a background image on the canvas. Now I'm trying to get an area in the middle of the T-shirt that will act as a clipping mask. I only want objects that are inside this area to be visible.

Here's my code: http://jsfiddle.net/mtb2p3Lx/4/

var canvas = new fabric.Canvas('c');

// set background
fabric.Image.fromURL('https://qstomizr.s3.amazonaws.com/11102-9LDAQLKA1585254870.5083.jpg', (img) => {
  canvas.setBackgroundImage(img, null, {
    originX: 'center',
    originY: 'center',
    top: canvas.getCenter().top,
    left: canvas.getCenter().left,
    stroke: 'black',
    strokeWidth: 1,
  });

  canvas.renderAll();
});


// set masking area
var area = new fabric.Rect({
  originX: 'center',
  originY: 'center',
  top: this.canvas.getCenter().top,
  left: this.canvas.getCenter().left + 10,
  width: 250,
  height: 300,
  selectable: false,
  fill: 'transparent',
  stroke: 'black',
  strokeWidth: 2,
});

canvas.add(area)


// set example rect
var rect = new fabric.Rect({
  originX: 'center',
  originY: 'center',
  top: this.canvas.getCenter().top + 50,
  left: this.canvas.getCenter().left + 150,
  height: 100,
  width: 100,
  fill: 'pink',
});

canvas.add(rect)

I tried adding a clip path to the area rect, also tried playing around with globalCompositeOperation, but I couldn't get anything to work without having to sacrifice the background image.

Is there a way to get the transparent area rect to act as a clipping mask for the other objects in the canvas?

Answer 1

As you can see on this site https://printio.ru/tees/new_v2. For implementing background image was used img tag without setBackgroundImage. And I make an example for you here

https://jsfiddle.net/RamanNikitsenka/4suna7yo/1/