Getting started with fabricjs Fabricjs canvas events FabricJS canvas Serialization

FabricJS canvas Serialization

Remarks:

For more about FabricJS canvas serialization Refer the link Canvas Serialization

Canvas Serilization

<canvas id = "canvas" height='400' width='500'></canvas>

var canvas = new fabric.Canvas(document.getElementById('canvas'));
console.log(JSON.stringify(canvas)); // '{"objects":[],"background":""}'

canvas.add(new fabric.Rect({
  left: 10,
  top: 10,
  height: 50,
  width: 50,
  fill: 'green',
     stroke:'black'
}));
canvas.renderAll();

console.log(JSON.stringify(canvas));//logs the string representation
console.log(canvas.toObject());//logs canvas as an object
console.log(canvas.toSVG());//logs the SVG representation of canvas

Fiddle

Syntax:

JSON.stringify(canvas) - implicitly calls toJSON method on passed object. Gives String representation
canvas.toObject() - returns the same representation as toJSON, only in a form of actual object
canvas.toSVG() - returns an SVG representation of the canvas

Contributors

Topic Id: 8274

Example Ids: 26564

This site is not affiliated with any of the contributors.