Objects move position automatically when trying to select all on mousedown (Fabric.JS)
<p>When I use a button to select all objects I am able to move everything fine, and it all stays in position. However if I want to fire the event when I click on a object on the canvas, it does not work as intended.</p>

<p>Here is a Plnk;</p>

<p><a href="http://plnkr.co/edit/iqn5QpBRe30eftoI1z8p?p=preview" rel="nofollow">http://plnkr.co/edit/iqn5QpBRe30eftoI1z8p?p=preview</a></p>

<p>I am using this as snippet of code to selectAll;</p>

<pre><code>function selectAllCanvasObjects(){
var objs = canvas.getObjects().map(function(o) {
  return o.set('active', true);
});

var group = new fabric.Group(objs, {
  originX: 'center', 
  originY: 'center'
});

canvas._activeObject = null;

canvas.setActiveGroup(group.setCoords()).renderAll();

}
</code></pre>

<p>When I activate it through a button click, I am able to move all objects on the canvas okay, and they also do not move position on click.</p>

<p>If I activate it the following way;</p>

<pre><code>triangle.on('mousedown', function(e){
  selectAllCanvasObjects();
})
</code></pre>

<p>It will not initialise moving all objects straight away.</p>

<p>If I use;</p>

<pre><code>canvas.on('mouse:down', function(e){
  selectAllCanvasObjects();
})
</code></pre>

<p>It will make the objects automatically jump position.</p>

<p>I am wondering if there is a way I can use the two previous methods so the function behaves like when clicked?</p>