Fabric.js Canvas clip (or group of objects) In Polygon

Question

I have a canvas drawn in Fabric.js that I add a group of rectangles, I want to limit the edges of these rectangles as a group so as not to go beyond a certain area.

Imagine you are making a striped T-shirt, the stripes are made using a series of rectangles, and I need to keep them in the shape of a T-shirt.

I think it’s best to pin the entire canvas in the shape of a T-shirt, so everything I add to it remains in the T-shirt, but I'm stuck. So far I have only a clip to the main circles and rectangles.

thanks

Answer 1

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

I just uploaded a custom SVG form to kitchensink and did the following:

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

As you can see, the entire canvas is now cropped with this SVG shape.

Answer 2

You can also try the following: http://jsfiddle.net/ZxYCP/198/

 var clipPoly = new fabric.Polygon([ { x: 180, y: 10 }, { x: 300, y: 50 }, { x: 300, y: 180 }, { x: 180, y: 220 } ], { originX: 'left', originY: 'top', left: 180, top: 10, width: 200, height: 200, fill: '#DDD', /* use transparent for no fill */ strokeWidth: 0, selectable: false }); 

You can simply use Polygon for the clip. The answer is based on @natchiketa's idea in this question. Several clipping areas on Fabric.js canvas