Porchy Web Development

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:


Join the newsletter

Subscribe to get the latest content by email.

Powered by ConvertKit. If you give me your email address, you may receive emails from me (JJ) about posts on this site. You can unsubscribe at any time.

Porchy Ltd is a company registered in England, no. 12035925

VAT Registration no. 331196421

Built with WPGraphQL and Gatsby

© 2019 - 2021