I try to serialize a canvas with a circle whose fill attribute is anything but black. I tried #666666 and null. The canvas renders okay and the serialized value contains the correct fill attribute.
When I try to deserialize via readFromJSON, however, the figure always yields a black fill color.
Here's the serialized image (note that the fill attribute is null):
Here's the code snippet that creates the circle (arc):
var arc = new fabric.Circle({
radius: 75,
//startAngle: 0,
//endAngle: 1.5 * Math.PI,
stroke: '#FF0000',
strokeWidth: 60,
fill: null
});
Here's the deserialized image:
Here's the JSON object for reference. Note that the circle (arc) has a 'null' fill value ("fill":null) in the JSON string but does not render properly.
{"objects":[{"type":"rect","originX":"left","originY":"top","left":100,"top":100,"width":80,"height":80,"fill":"red","stroke":null,"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","rx":0,"ry":0},{"type":"group","originX":"left","originY":"top","left":150,"top":100,"width":210,"height":210,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":-10,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","objects":[{"type":"circle","originX":"left","originY":"top","left":-105,"top":-105,"width":150,"height":150,"fill":null,"stroke":"#FF0000","strokeWidth":60,"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","radius":75,"startAngle":0,"endAngle":6.283185307179586}]}],"background":""}