# Fabric.js clipping and panning

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.

Recent topics

A concept by Wonderlus