title: Fabric.js: Image controls behind an overlay image
body: <p>I'm building a canvas user interface with jquery and fabric.js library and I set an overlay png image with a transparent section using the following code</p>
  
  <pre><code>var bgImgSrc = bgImg.attr('src');
  canvas.setOverlayImage(bgImgSrc, function(img){
    canvas.renderAll();
  });
  </code></pre>
  
  <p>I also added an image behind the overlay and resized to fit the container using the following code</p>
  
  <pre><code>var photoImg = $('#img-photo');
  var photoImgSrc = photoImg.attr('src');
  fabric.Image.fromURL(photoImgSrc, function(img) {
    var photoImgWidth = photoImg.width();
    var photoImgHeight = photoImg.height();
    var hRatio = 380/photoImgWidth;
    var vRatio = 300/photoImgHeight;
    var ratio = Math.min(hRatio, vRatio);
    pImg = img.set({left: 380/2, top: 300/2, angle: 0})
    img.scale(ratio).setCoords();    
    canvas.add(pImg);
    canvas.sendToBack(pImg);
    canvas.renderAll();
  });
  </code></pre>
  
  <p>And it works as expected, however, when I click on the image to scale/resize it, I don't see the controls, except through the transparent space of the overlay image. Controls are behind the overlay image, is there a way to force show the image controls without having to put the entire image in front of the overlay?</p>