title: How to Space Evenly between objects horizontally and Vertically on canvas with fabricJS?
body: <p>I'm using fabric js + typescript. I have more then 2 Objects and i want to set Space Evenly between those objects horizontally and Vertically . I can't find any solution.
  I'm using fabric js + typescript. I have more then 2 Objects and i want to set Space Evenly between those objects horizontally and Vertically . I can't find any solution.</p>
  
  <p><a href="https://i.stack.imgur.com/qDjZj.gif" rel="nofollow noreferrer">see this</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>fabric.Object.prototype.originX = "center";
  fabric.Object.prototype.originY = "center";
  
  var canvas = window._canvas = new fabric.Canvas('c');
  
  var circle1 = new fabric.Circle({
    radius: 30,  fill: 'red',  left: 50, top: 70,  originX: "left",  originY: "top"
  });
  
  var circle2 = new fabric.Circle({
    radius: 40,  fill: 'green',  left: 200, top: 100,  originX: "left",  originY: "top"});
  
  var circle3 = new fabric.Circle({
    radius: 30,  fill: 'blue',  left: 300, top: 150,  originX: "left",  originY: "top"
  });
  
      canvas.add(circle1);
      canvas.add(circle2);
      canvas.add(circle3);
  
  $('#distribute').click(function () {
     var group = canvas.getActiveObject();
      var items = canvas.getActiveObject()._objects,
      newDim = getNewViewDimensions(group, 'horizontal');
      group.set({
        // width: newDim.width + (2 * 0),
        // height: newDim.height + (items.length - 1) * 10 + (2 * 0)
      });
      for (var i = 0; i &lt; items.length; i++) {
        if (i == 0) {
          items[i].set({
            left: -group.width / 2 + 0,
            top: -group.height / 2 + 0
          });
        } else {
          items[i].set({
            left: items[i - 1].left,
            top: items[i - 1].top + items[i - 1].height + 10
          });
        }
      }
      canvas.renderAll();
  });
  
   function getNewViewDimensions(group, val) {
      var objects = canvas.getActiveObject()._objects, minWidth = 0, minHeight = 0, w, h;
      switch (val) {
        case 'vertical':
          for (i = 0; i &lt; objects.length; i++) {
            minWidth += objects[i].width * objects[i].scaleX;
            h = objects[i].height * objects[i].scaleY;
            if (h &gt; minHeight) {
              minHeight = h;
            }
          }
          break;
        case 'horizontal':
          for (var i = 0; i &lt; objects.length; i++) {
            minHeight += objects[i].height * objects[i].scaleY;
            w = objects[i].width * objects[i].scaleX;
            if (w &gt; minWidth) {
              minWidth = w;
            }
          }
          break;
      }
      return {
        width: minWidth,
        height: minHeight
      }
    }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
      border: 1px solid #999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.5.0/fabric.min.js"&gt;&lt;/script&gt;
  &lt;canvas id="c" width="400" height="300"&gt;&lt;/canvas&gt;
  
  &lt;small&gt; select all circles and hit the button &lt;/small&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;button id="distribute"&gt;  distribute &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>