title: fabric js - objects in generated image have different positioning than the one in the canvas
body: <p>I'm trying to use Fabric js to generate some images with text on it. But for some reason the positioning of the text in the generated image isn't consistent with the one in the canvas. Here's the image as it looks like in the canvas:</p>
  
  <p><img src="https://i.stack.imgur.com/pE99V.png" alt="enter image description here"></p>
  
  <p>But the generated image looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/XdBaf.png" alt="enter image description here"></p>
  
  <p>The size I gave to the canvas is 881x640 and its the same with the output size I gave to the image. </p>
  
  <p>Here's what I'm currently doing in my code. </p>
  
  <p>I'm adding the background image into the canvas from the URL. But before I do, I first resize the image to be the same size as the canvas:</p>
  
  <pre><code>fabric.Image.fromURL(image_source, function(oImg) {
        oImg.width = canvas.width;
        oImg.height = canvas.height;
        canvas.add(oImg);
  });
  </code></pre>
  
  <p>Then I'm sending the stringified result of the <code>canvas.toJSON()</code> call to the node js server to generate the image using AJAX:</p>
  
  <pre><code>$.post('http://host:1212', {'canvas': JSON.stringify(canvas.toJSON())});
  </code></pre>
  
  <p>In the server side I then load the objects and create the image:</p>
  
  <pre><code>var out = fs.createWriteStream(__dirname + '/uploads/' + file_name);
  
  var body = '';
  request.on('data', function(data){
      body += data;
  });
  
  request.on('end', function(){
  
    var request_params = qs.parse(body);
  
    //set to same size as the canvas on the client side
    var canvas = fabric.createCanvasForNode(881, 640);
  
    canvas.loadFromJSON(request_params.canvas, function(){
      canvas.renderAll();
  
      var stream = canvas.createPNGStream();
      stream.on('data', function(chunk){
        out.write(chunk);
      });
  
      stream.on('end', function(){
        //close filestream
        out.end();
    });
  });
  </code></pre>
  
  <p>Any ideas where could have I gone wrong?</p>