Fabric.js Clip Canvas (or object group) To Polygon
18,794
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.
Author by
fiscme
Updated on June 08, 2022Comments
-
fiscme almost 2 years
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
-
kangax over 10 years@simmisimmi it's a first item on canvas
-
MANISHDAN LANGA over 10 years@kangax can u give me example for it or any fiddle.
-
MANISHDAN LANGA over 10 yearscan we clipped by the image shape to image shape
-
Innodel about 9 yearsCanvas clipping is working perfect but this clipTo function is also clipping canvas' backgroundimage, I don't want its backgroundImage to be clipped.
-
Khawer Zeshan about 9 yearsThis
clipTo
does not work if there are multiple paths in the SVG. See this question. -
Bhupendra Jadeja about 8 yearsi did the same but i am getting error that shape is not defined