I am trying to do an interactive drawing using Fabric.js. Now I can draw a rectangle by using mouse. But after I finish drawing the rectangle, I can not select it unless I resize it once by using the left top controller after drawing. I wonder what break the event system.

Here is my code: /

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.saveState();
            });


        }
    });

    canvas.on('mouse:up', function () {
        canvas.off('mouse:move');
    });

I am trying to do an interactive drawing using Fabric.js. Now I can draw a rectangle by using mouse. But after I finish drawing the rectangle, I can not select it unless I resize it once by using the left top controller after drawing. I wonder what break the event system.

Here is my code: http://jsfiddle/rmFgX/1/

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.saveState();
            });


        }
    });

    canvas.on('mouse:up', function () {
        canvas.off('mouse:move');
    });

• javascript
• html5-canvas
• fabricjs

1 Answer 1

updated the fiddle http://jsfiddle/rmFgX/5/

For an object when changing position/dimension -related properties (left, top, scale, angle, etc.) set does not update position of object's borders/controls.

If you need to update those, call:

setCoords().