How to select covered objects via mouse in fabricJS?
<p>I'm trying to develop a way to select objects that are layered below and (totally) covered by other objects. One idea is to select the top object and then via <code>doubleclick</code> walk downwards through the layers. This is what I got at the moment:</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>var canvas = new fabric.Canvas("c");

fabric.util.addListener(canvas.upperCanvasEl, "dblclick", function (e) {
  var _canvas = canvas;
  var _mouse = _canvas.getPointer(e);
  var _active = _canvas.getActiveObject();
    
  if (e.target) {
    var _targets = _canvas.getObjects().filter(function (_obj) {
      return _obj.containsPoint(_mouse);
    });
      
    //console.warn(_targets);
      
    for (var _i=0, _max=_targets.length; _i&lt;_max; _i+=1) {
      //check if target is currently active
      if (_targets[_i] == _active) {
        //then select the one on the layer below
        _targets[_i-1] &amp;&amp; _canvas.setActiveObject(_targets[_i-1]);
         break;
        }
      }
    }
});

canvas
  .add(new fabric.Rect({
    top: 25,
    left: 25,
    width: 100,
    height: 100,
    fill: "red"
  }))
  .add(new fabric.Rect({
    top: 50,
    left: 50,
    width: 100,
    height: 100,
    fill: "green"
  }))
  .add(new fabric.Rect({
    top: 75,
    left: 75,
    width: 100,
    height: 100,
    fill: "blue"
  }))
  .renderAll();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
 border: 1px solid;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"&gt;&lt;/script&gt;
&lt;canvas id="c" width="300" height="200"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>

<p>As you can see, trying to select the <code>red</code> rectangle from within the <code>blue</code> one is not working. I'm only able to select the <code>green</code> or the <code>blue</code>. I guess that after the first <code>doubleclick</code> worked (<code>green</code> is selected), clicking again just selects <code>blue</code> so the following doubleclick is only able to get <code>green</code> again.</p>

<p><strong>Is there a way around this? Any other ideas?</strong></p>