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

can we cllipped by the image shape to image shape ? – MANISHDAN LANGA Nov 28 '13 at 11:27 — MANISHDAN LANGA, Nov 28 '13 at 11:27

score 23 · Accepted Answer · edited Aug 26 '16 at 18:21

23

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);
};

canvas clipped to a shape

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

edited Aug 26 '16 at 18:21

Vito Gentile

13,336
9
61
96

answered Sep 16 '13 at 23:23

kangax

38,898
13
99
135

@simmisimmi it's a first item on canvas – kangax Sep 25 '13 at 17:35
1

@kangax can u give me example for it or any fiddle. – MANISHDAN LANGA Nov 20 '13 at 11:39
can we clipped by the image shape to image shape – MANISHDAN LANGA Nov 28 '13 at 11:22
1

Canvas clipping is working perfect but this clipTo function is also clipping canvas' backgroundimage, I don't want its backgroundImage to be clipped. – Innodel Feb 19 '15 at 07:03
2

This `clipTo` does not work if there are multiple paths in the SVG. See [this](http://stackoverflow.com/questions/29915711/fabric-js-grouping-svg-elements) question. – Khawer Zeshan Apr 28 '15 at 13:06
i did the same but i am getting error that shape is not defined – Bhupendra Jadeja Feb 23 '16 at 12:07

score 0 · Answer 2 · edited May 23 '17 at 11:48

You may also try this one: 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 to clip. Answer is based on @natchiketa idea in this question Multiple clipping areas on Fabric.js canvas

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

2 Answers2

Linked