var canvas = window._canvas = new fabric.Canvas('c');
// json of circle object
var circle1 = {
type: "circle",
originX: "center",
originY: "center",
left: 100,
top: 60,
width: 160,
height: 160,
fill: "",
overlayFill: null,
stroke: "rgb(0,0,0)",
strokeWidth: 5,
strokeDashArray: null,
scaleX: 1,
scaleY: 0.7,
angle: 0,
flipX: false,
flipY: false,
opacity: 1,
selectable: true,
hasControls: true,
hasBorders: true,
hasRotatingPoint: true,
transparentCorners: true,
perPixelTargetFind: false,
shadow: null,
visible: true,
radius: 80,
XZIndex:60
};
var circle2 = {
type: "circle",
XZIndex:80,
originX: "center",
originY: "center",
left: 100,
top: 140,
width: 160,
height: 160,
fill: "",
overlayFill: null,
stroke: "rgb(255,0,0)",
strokeWidth: 5,
strokeDashArray: null,
scaleX: 1,
scaleY: 0.7,
angle: 0,
flipX: false,
flipY: false,
opacity: 1,
selectable: true,
hasControls: true,
hasBorders: true,
hasRotatingPoint: true,
transparentCorners: true,
perPixelTargetFind: false,
shadow: null,
visible: true,
radius: 80
};
// var path = {"type":"path","originX":"left","originY":"top","left":0,"top":0,"width":300,"height":300,"fill":"red","stroke":"green","strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"pathOffset":{"x":150,"y":150},"path":[["M",0,0],["L",300,100],["L",200,300],["z"]]}
fabric.util.enlivenObjects([circle1,circle2], function(objects) {
var origRenderOnAddRemove = canvas.renderOnAddRemove;
canvas.renderOnAddRemove = false;
objects.forEach(function(o) {
// canvas.moveTo(o, 200);
canvas.add(o);
});
canvas.renderOnAddRemove = origRenderOnAddRemove;
canvas.renderAll();
});
console.log(JSON.stringify(canvas));
