Question

97

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

rated 0 times [ 99] [ 2] / answers: 1 / hits: 20239 / 11 Years ago, sun, september 15, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jadyngraysons

Add To Favorites

Follow

Total Points: 455

Total Questions: 109

Total Answers: 98

Location: Trinidad and Tobago

Member since Fri, May 8, 2020

4 Years ago

jadyngraysons questions

1 AWS Lambda SNS Destinations not working on failure or success

Fri, Aug 14, 20, 00:00, 4 Years ago

1 React Hooks useState Array empty with states rendered in the component

Tue, May 5, 20, 00:00, 4 Years ago

1 postman pm set environment variable

Thu, Apr 23, 20, 00:00, 4 Years ago

1 getElementById after dynamically adding it in React

Sat, Jan 18, 20, 00:00, 4 Years ago

1 How to customise Intl.DateTimeFormat date?

Tue, Dec 31, 19, 00:00, 4 Years ago

View All

answered 11 Years ago davisbrandtm · Accepted Answer

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

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