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

Warning: Parameter 1 to W3_Plugin_TotalCache::ob_callback() expected to be a reference, value given in /mnt/home_bingo/codecaptain/codecaptain.io/public/wp-includes/functions.php on line 3583