How do I change a value for a Fabric.js object?

Question

I have a Fabric.js canvas. I also have a javascript that has a function that gets called when a button is pressed. I know how to get the active object, canvas.getActiveObject(), but i don't know how to just change a value in it without having to make a clone and deleting the original. The reason why i just want to change the original is because when the button is pressed again, weird things happen. Any clue on how to do this?

Answer 1

There are many getters and setters for values:

object.setWidth(val);
object.setHeight(val);
object.setStrokeWidth(val);
object.setLeft(val);
object.setTop(val);

You can also change values with general set method:

object.set('width', value);
object.set({ width: value, height: value});

If you change dimension or position affecting properties you have to call object.setCoords() after changing the property. Otherwise the "click area" of the object is wrong. After changing properties you have to call canvas.renderAll() to re-render all objects.

For more information just have a look at the docs: fabricjs.com/docs/fabric.Object.html

Answer 2

Apparently setters are removed in the latest version of Fabric.js (using version 2.7.0). You can now simply set the properties on the object directly:

// Set your new property values
object.width = val;
object.height = val;
object.strokeWidth = val;
object.left = val;
object.top = val;

// Then you mark the object as "dirty" and render the canvas:
object.dirty = true;
canvas.renderAll();

Alternatively you can set all properties at once using the set method an object like this:

// Set all properties at once using the set method
object.set({ 
    width: val, 
    height: val,
    strokeWidth: val,
    left: val,
    top: val
});

// In this case the setter marks the object as "dirty" so you only need to call renderAll
canvas.renderAll();