Move object within canvas boundary limit
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);
}
});
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/