Pfthb

I'm trying to limit the movement of an object only inside the canvas. This I have achieved with the following code

if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left< 0)
 obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
 obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left));

// bot-right corner
if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width)
 obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
 obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);

This works well when I have no zoom applied to the canvas.
I need to be able to make it work also when I apply a zoom + or a zoom -

I had thought about trying to solve it like this

if(obj.getBoundingRect().top*canvas.getZoom() < 0 || obj.getBoundingRect().left*canvas.getZoom() < 0)
 obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top)*canvas.getZoom();
 obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left)*canvas.getZoom();

// bot-right corner
if(obj.getBoundingRect().top*canvas.getZoom()+obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left*canvas.getZoom()+obj.getBoundingRect().width > obj.canvas.width)
 obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top)*canvas.getZoom();
 obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left)*canvas.getZoom();

But it does not work. Can you help me?

Edit: Add the fiddle

https://jsfiddle.net/samael205/m19cuk0j/1/

Edit: Sloved, that ONLY works with Fabric 2.0.0+

if(obj.getBoundingRect(true).top < 0 || obj.getBoundingRect(true).left < 0)
 obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect(true).top);
 obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect(true).left);

// bot-right corner
if(obj.getBoundingRect(true).top+obj.getBoundingRect(true).height > obj.canvas.height/canvas.getZoom() || obj.getBoundingRect(true).left+obj.getBoundingRect(true).width > obj.canvas.width/canvas.getZoom())
 obj.top = Math.min(obj.top, obj.canvas.height/canvas.getZoom()-obj.getBoundingRect(true).height+obj.top-obj.getBoundingRect(true).top);
 obj.left = Math.min(obj.left, obj.canvas.width/canvas.getZoom()-obj.getBoundingRect(true).width+obj.left-obj.getBoundingRect(true).left);

Thanks, everything works fine, I rewrote a little, can it be useful to someone

canvas.on("object:moving", function(e)
 var obj = e.target;
 obj.setCoords();

 var bound = obj.getBoundingRect(true);
 var width = obj.canvas.width;
 var height = obj.canvas.height;

 obj.left = Math.min(Math.max(0, bound.left), width - bound.width);
 obj.top = Math.min(Math.max(0, bound.top), height - bound.height);
)