Fabric.js clipping and panning

  • 1 Min. Read.

A client of ours required an interactive canvas with the ability to clip uploaded images into rectangles. 

We created a ClipRect class that abstracts all the complexity away, and takes 2 arguments in its constructor:

  • The canvas object
  • Coordinates of the clipRect

The most interesting part is the clipTo method on our uploaded image, take a look at our code snippet:

Our _zoom helper will multiply our coordinates with the devicePixelRatio, so our coordinate system will work well on HiDPI screens (like Macbooks).

You can find the source code and a demo on our Github.

A concept by Wonderlus