title: Fabric.js: what is the difference between `add()` and `addWithUpdate()`?
body: <pre><code>var canvas = new fabric.Canvas('canvas');
  var a = new fabric.Rect({ width: 20, height: 20 });
  var g = new fabric.Group([a]);
  canvas.add(g);
  
  var b = new fabric.Rect({ width: 20, height: 20, left: 30 });
  g.add(b);
  canvas.renderAll();
  </code></pre>
  
  <p>I expect this code to give me two squares horizontally separated by 30 pixels. Instead, it gives me this:</p>
  
  <p><a href="https://i.stack.imgur.com/hpVRU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hpVRU.jpg" alt="squares not aligned!"></a></p>
  
  <p>When I replace <code>g.add()</code> above with <code>g.addWithUpdate()</code>, I get the expected result. Why? I don't think I understand the docs; they say that <code>addWithUpdate()</code></p>
  
  <blockquote>
    <p>Adds an object to a group; Then recalculates group's dimension, position.</p>
  </blockquote>
  
  <p>I don't see what the group's dimensions or positions has to do with this. Can anyone shed some light? The real problem I'm having is more complicated than the one above, but I think is basically because I don't understand <code>addWithUpdate()</code>.</p>