Fabricjs Object Controls Visible Outside Canvas

I am using fabric.js for html 5 interactive canvas app. If the object scales larger than the canvas, the controls go invisible outside canvas. How to make it visible outside the ca

Solution 1:

So, in fabricjs controls are rendered on the canvas, so having controls outside canvas it is not possible.

You can still obtain the effect in this way, this is just a trace.

Make canvas big as 100% of window, or anyway very bigger than drawing area. Then you can clip the drawing canvas with a rectangle. If you need borders to define the drawing area you can still put an overlay image as fabricjs allow you.

If you need to have controls near the drawing canvas you will have to position them OVER the non drawing part of the canvas.

This will give you some additional tasks: When you create some object you have to be sure that they go in the drawing area. If you consider position of objects, you have to consider that a translation has to be applied, because you have absolute position while user will position the object watching a fake top left corner of a drawing area and not the top left corner of the canvas.

Solution 2:

The best thing you can do is make a larger canvas, but limit the drawing area to a limited part, like a margin. Not easy because after that you always need to consider the margin when making other calculations, but it is possible.