fabric.js on node.js loadFromDatalessJSON moves objects when in a group - node.js

Question

I am serializing a canvas on the client, and post it to a node.js server (ubuntu 14.10, with node.js version v0.10.34 and fabric 1.4.13).
On the client canvas, objects are in a group.
The problem is, the objects are moved when de-serialized on the server.
Client code:
$(function(){
fc= new fabric.Canvas('myCanvas');
fc.setBackgroundColor('white');
group = new fabric.Group([], { hasControls:false, hasBorders:true, top:-fc.getHeight(), left:-fc.getWidth(), width:2*fc.getWidth(), height:2*fc.getHeight(), hoverCursor:'default' });
fc.add(group);
// create a rectangle object
var rect = new fabric.Rect({
left: 150,
top: 100,
fill: 'red',
width: 20,
height: 20
});
// "add" rectangle onto canvas
group.add(rect);
var rect2 = new fabric.Rect({
left: 100,
top: 150,
fill: 'blue',
width: 20,
height: 20
});
group.add(rect2);
fc.renderAll();
$.post( window.location.origin+':8124/', {
width: group.getWidth(),
height: group.getHeight(),
data: encodeURI(JSON.stringify(fc.toDatalessJSON()))
}, function( data ) {}
);
});
Server code:
var fabric = require('fabric').fabric;
var express = require('express');
var app = express();
var fs = require('fs');
var PORT = 8124;
var bodyParser = require('body-parser')
app.use(bodyParser.json({ limit: '50mb'}) ); // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true,
limit: '50mb'
}));
app.post('/', function(req, res){
console.log('Post received');
if (req.body) {
res.writeHead(200, { 'Content-Type': 'image/png' });
var w=parseInt(req.body.width);
var h=parseInt(req.body.height);
var canvas = fabric.createCanvasForNode(w, h);
console.log(req.body.data);
out = fs.createWriteStream(__dirname + '/mindmap.png');
canvas.loadFromDatalessJSON(decodeURI(req.body.data), function() {
canvas.renderAll();
console.log(JSON.stringify(canvas.toDatalessJSON()));
var stream = canvas.createPNGStream();
stream.on('data', function(chunk) {
out.write(chunk);
console.log('writing chunk');
});
stream.on('end', function() {
out.end();
});
});
}
});
app.listen(PORT);
The console.log statement shows that the two rects are created (left:15, top-35) and (left:-35, top:15) respectively.
On the client, top/left object properties are relative to center of the group.
This is why I create the group with -fc.getWidth and-fc.getHeight left and top respectively. This works fine on the client.
Maybe this is not the case on the server?
EDIT: this seems to be an issue with loadFromDatalessJSON, at least on node.
Running the following code on the node server shows that top/left properties of the rectangles are wrong after serializing the first canvas and deserializing into the second one:
var fabric = require('fabric').fabric;
var fs = require('fs');
var canvas = fabric.createCanvasForNode(200, 200);
canvas.setBackgroundColor('white');
var out = fs.createWriteStream(__dirname + '/mindmap.png');
var group = new fabric.Group([], { top:-200, left:-200, width:400, height:400});
canvas.add(group);
var rect = new fabric.Rect({
left:150,
top:100,
fill:'red',
width:20,
height:20
});
group.add(rect);
var rect2 = new fabric.Rect({
left:100,
top:150,
fill:'blue',
width:20,
height:20
});
group.add(rect2);
canvas.renderAll();
console.log(JSON.stringify(canvas.toDatalessJSON()));
var canvas2 = fabric.createCanvasForNode(200, 200);
canvas2.loadFromDatalessJSON(canvas.toDatalessJSON());
canvas2.renderAll();
var stream = canvas2.createPNGStream();
stream.on('data', function(chunk) {
out.write(chunk);
console.log('writing chunk');
});
stream.on('end', function() {
out.end();
console.log('png image generated');
});
console.log(JSON.stringify(canvas2.toDatalessJSON()));
Next step is to run similar code on the client and see if the problem exists as well.
EDIT2: the same problem occurs on the client, and with toJSON as well instead of toDatalessJSON. Can someone help? Is this a known issue with groups serialization/deserialization? Is there a workaround?
Thanks
After searching for similar issues, it looks like this is very similar to [#1159] [https://github.com/kangax/fabric.js/issues/1159]
But this issue is supposed to be fixed, and I don't have any transform on my canvas ...

Answer 1

I had this problem and fixed it by installing the latest version from the github releases section: https://github.com/kangax/fabric.js/releases