Move object within canvas boundary limit

Question

I am trying to limit the moving object within the canvas but i am getting some difficulty in moving the object in the limit area on top and left side and when i scale the object bigger then also i am not able to limit the moving object on left and top sides of the canvas

canvas.observe("object:moving", function(e) {   var obj = e.target;   // if object is too big ignore   if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width) {     return;   }    var halfw = obj.currentWidth/2;   var halfh = obj.currentHeight/2;   var bounds = {     tl: {x: halfw, y:halfh},     br: {x: obj.canvas.width-halfw, y: obj.canvas.height-halfh}   };    // top-left  corner   if(obj.top < bounds.tl.y || obj.left < bounds.tl.x) {     obj.top = Math.max(obj.top, bounds.tl.y);     obj.left = Math.max(obj.left, bounds.tl.x )   }            // bot-right corner   if(obj.top > bounds.br.y || obj.left > bounds.br.x) {     obj.top = Math.min(obj.top, bounds.br.y);     obj.left = Math.min(obj.left, bounds.br.x)   } }); 

Answer 1

canvas.on('object:moving', function (e) {   var obj = e.target;   // if object is too big ignore   if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){     return;   }   obj.setCoords();   // top-left  corner   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);   } }); 

Answer 2

Here you can find solution:-

var canvas = window._canvas = new fabric.Canvas('c'); canvas.selection = false;  fabric.Object.prototype.set({     transparentCorners: false,     cornerColor: 'red',     cornerSize: 12,     padding: 0 }); text = new fabric.Text('Sample',{     top: canvas.height/2,     left: canvas.width/2,     fill: '#000000' });  canvas.add(text); canvas.setActiveObject(text);  canvas.observe('object:scaling', function (e) {     var obj = e.target;   if(obj.getHeight() > obj.canvas.height || obj.getWidth() > obj.canvas.width){     obj.setScaleY(obj.originalState.scaleY);     obj.setScaleX(obj.originalState.scaleX);           }   obj.setCoords();   if(obj.getBoundingRect().top - (obj.cornerSize / 2) < 0 ||       obj.getBoundingRect().left -  (obj.cornerSize / 2) < 0) {     obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top + (obj.cornerSize / 2));     obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left + (obj.cornerSize / 2));       }   if(obj.getBoundingRect().top+obj.getBoundingRect().height + obj.cornerSize  > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width + obj.cornerSize  > obj.canvas.width) {      obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top - obj.cornerSize / 2);     obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left - obj.cornerSize /2);       } });  canvas.observe('object:moving', function (e) {     var obj = e.target;   if(obj.getHeight() > obj.canvas.height || obj.getWidth() > obj.canvas.width){     obj.setScaleY(obj.originalState.scaleY);     obj.setScaleX(obj.originalState.scaleX);           }   obj.setCoords();   if(obj.getBoundingRect().top - (obj.cornerSize / 2) < 0 ||       obj.getBoundingRect().left -  (obj.cornerSize / 2) < 0) {     obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top + (obj.cornerSize / 2));     obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left + (obj.cornerSize / 2));       }   if(obj.getBoundingRect().top+obj.getBoundingRect().height + obj.cornerSize  > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width + obj.cornerSize  > obj.canvas.width) {      obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top - obj.cornerSize / 2);     obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left - obj.cornerSize /2);       } }); 

http://jsfiddle.net/jw1827fm/1/