javascript - Fabric.js Clip Canvas (or object group) To Polygon

Question

I have a canvas drawn in Fabric.js that i am adding a group of rectangles to, i want to limit the edges of those rectangles as a group to not go outside a certain area.

Imagine making a stripy t-shirt, the stripes are make by using a series of rectangles and i need to keep them to the shape of the t-shirt.

I think its better to clip the entire canvas to the shape of the t shirt, so anything i add to it remains within the t-shirt but i am stuck. So far i am only clip to basic circles and rectangles.

Thanks

Answer 1

You can just render a shape inside canvas.clipTo :)

I just loaded a random SVG shape in kitchensink and did this:

var shape = canvas.item(0);
canvas.remove(shape);
canvas.clipTo = function(ctx) {
  shape.render(ctx);
};

As you can see, entire canvas is now clipped by that SVG shape.