Calculate object.clipTo rectangle path when cropping in Fabric.js


Playing with Fabric.js was fun although one bit I had trouble with was calculating the object.clipTo rectangle path.

The docs say this:

clipTo :function Function that determines clipping of an object (context is passed as a first >argument) Note that context origin is at the object’s center point (not >left/top corner)”

I got turned around with the initial coordinates but working out this derivation helped immensely:

3628bf52-fdb4-427c-81e0-bfdb061820bd2fimg_4481

2 responses to “Calculate object.clipTo rectangle path when cropping in Fabric.js”

  1. Ramya

    Hi , i m facing issues in cropping.. followed ur formula to calculate coordinates still no luck. the whole image is getting disappeared when cropping the selected rectangle.

  2. I found it really confusing and did this a while ago so can’t remember the particulars but the issue was that the context origin – (0,0) – is not a corner as I would have expected, instead it’s the center of the object.

    But I do remember at first I brute forced it because I had the same issue. I just tried smaller and smaller hardcoded rectangles around the origin until I figured out what was going on. 🙂 I know that’s not the answer to your question but it helped me understand what was going on.

Leave a Reply

Your email address will not be published. Required fields are marked *

By submitting this comment, you are agreeing to the use of Akismet which helps reduce spam. You can view Akismet’s privacy policy here. Your email, website and name are also stored on this site.