adding custom attributes to fabricjs object

Question

Im trying to add a custom attribute to a fabric js object that i have:

var trimLine = new fabric.Rect({
    width: Math.round(obj.box_dimensions.box.width,2),
    height: Math.round(obj.box_dimensions.box.height,2),
    strokeWidth: 1,
    stroke: 'rgb(255,2,2)',
    fill: '',
    selectable: false
});

so thats my rectangle im trying to add and i want to pass a name or id in it to be able to identify it later when i get the canvas object and convert it to a json.

I have tried doing

var trimLine = new fabric.Rect({
    width: Math.round(obj.box_dimensions.box.width,2),
    height: Math.round(obj.box_dimensions.box.height,2),
    strokeWidth: 1,
    stroke: 'rgb(255,2,2)',
    fill: '',
    selectable: false,
    name: trimLine
});

canvas.add(trimLine);
canvas.renderAll();

and it did not work i also tried to do

 trimline.name = 'trimLine'

Answer 1

name:trimLine should be name:"trimLine" unless you have previously declared a var trimLine='myTrimLineName'.

FabricJS has many attached properties, including the name property.

To avoid overwriting these native properties, add a sub-property to indicate these are your own custom properties:

// example: using .my to hold your own custom properties
trimLine.my.name='trimLine';
trimLine.my.id='myOwnID15';
trimLine.my.sayName=function(){alert(this.my.name);}