Fabric.js automaticaly filters out non-standard properties when exporting canvas data via built-in serialization methods. By default, attributes appended directly to shape instances are stripped during the conversion process to prevent bloating the resulting payload with unsupported fields.
When instantiating a drawing object, developers often atttach metadata such as identifiers or configuration states:
const myCanvas = new fabric.Canvas('drawing-surface');
const customShape = new fabric.Rect({
width: 60,
height: 40,
fill: '#4a90e2',
left: 50,
top: 50,
instanceId: 'box-alpha'
});
myCanvas.add(customShape);
console.log(myCanvas.toJSON());
// Result: { instanceId } is missing from the output
The standard export routine ignores user-defined keys. To retain specific attributes within the serialized payload, pass an array containing the target property names as the first argument to the export method:
const exportedData = myCanvas.toJSON(['instanceId']);
console.log(exportedData.objects[0].instanceId); // Returns 'box-alpha'
This parameter tells the internal serializer to whitelist the specified keys during the traversal phase. The mechanism integrates seamless into the existing pipeline without requiring subclass overrides or manual attribute mapping.
The same parameter signature applies across alternative export utilities. Methods like toObject(), toDatalessJSON(), and toDatalessObject() accept identical filtering arrays, allowing consistent data extraction regardless of the chosen serialization pathway. For bulk persistence operations, chaining this approach with local storage APIs ensures complete state restoration upon page reload.