Quiero restringir el área de dibujo de un lienzo con un clic de botón. Estoy dibujando un rect por fabric js . Quiero habilitar el modo de dibujo solo en ese rect . Si el mouse se mueve fuera del rectángulo, el dibujo se detiene.

Aquí está mi código de dibujo rect:

var canvas = new fabric.Canvas('canvas');

 var rect = new fabric.Rect({ top : 100, left : 100, width : 60, height : 70, fill : 'red' }); canvas.add(rect); canvas.on('mouse:down', function (option) { console.log(option); if (typeof option.target != "undefined") { return; } else { var startY = option.e.offsetY, startX = option.e.offsetX; console.log(startX, startY); var rect2 = new fabric.Rect({ top : startY, left : startX, width : 0, height : 0, fill : 'transparent', stroke: 'red', strokewidth: 4 }); canvas.add(rect2); console.log("added"); canvas.on('mouse:move', function (option) { var e = option.e; rect2.set('width', e.offsetX - startX); rect2.set('height', e.offsetY - startY); rect2.setCoords(); }); } }); canvas.on('mouse:up', function () { canvas.off('mouse:move'); });