I want to restrict drawing area of a canvas by a button click. I am drawing a rect by fabric js. I want to enable drawing mode in that rect only. If mouse moves out of rectangle, drawing stops.

Here is my code of drawing 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');
    });