Fabricjs: set bounds for objects?

Question

JavaScript

How to implement such behavior as in the video? https://yadi.sk/i/eOIkUkSyWVXq2g
So that when objects went beyond the borders, they were hidden as with overflow: hidden, but also to be able to grab the object outside the borders, I tried to show everything exactly in the video.

Answer 1

1. Dynamically expand the canvas (canvas) when the object is dragged beyond the borders, but do not let the object hide (expand by no more than 80% of the width or height, for example).
2. On the canvas, on top, apply a "screen": a layer with "transparency" (pointer-events) for mouse events (and with a rectangle in the center - the visible work area in the canvas): Then, when selecting, what is under the layer- "screen" will not be visible, but the boundaries of the selection area will be stretched (object selection event) behind this "screen" layer. That is, it will work as if everything is visible. Here are all the options for pointer-events. pointer-events: none;