Fabric.js: what is the difference between `add()` and `addWithUpdate()`?
<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>