CODEWITHSUNDEEP
jqueryhtmlcsscanvasfabricjs
anam
anam

Reputation: 3913

canvas Element resizing Element not responding well

chech fiddle http://jsfiddle.net/hxjZa/2/ . i have written code to set stroke and strokewidth of canvas element . they works fine but after setting stroke width value when i move my pointer to resize Element , it is not responding and automaicaly get change to small. even if i try to change then size by dragging it doesn't respond well .

jquery ::

   $('#glow_colour').spectrum({
        color : "#f00",
        change : function(color) {
            console.log(' color change' + color.toHexString());
            var temp=color.toHexString();
            var obj = canvas.getActiveObject();

            if (!obj)
                return;

             obj.set({  stroke: temp });
             obj.set({strokeWidth:strokewidth});
            canvas.renderAll();
        }
    });
$("#txt_g_strength").change(function()
{
    console.log('strength called');
    //alert("stength called");
    var obj = canvas.getActiveObject();
    var strokewidth=$(this).val();
            if (!obj)
                return;
obj.set({ strokeWidth: strokewidth}); 

            canvas.renderAll();

});

above is code to set stroke color and width .

Upvotes: 0

Views: 118

Answers (1)

dc5
dc5

Reputation: 12441

Fabric takes a number for the stroke width and won't automatically convert a string.

Change:

    txt.set({
        strokeWidth: strokewidth
    });

to:

    txt.set({
        strokeWidth: +strokewidth  // or Number(strokewidth)
    });

Demo

Upvotes: 1

Related Questions