Fabric.js: Image controls behind an overlay image

Question

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

var bgImgSrc = bgImg.attr('src');
canvas.setOverlayImage(bgImgSrc, function(img){
  canvas.renderAll();
});

I also added an image behind the overlay and resized to fit the container using the following 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();
});

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?

Answer 1

Just set the boolean controlsAboveOverlay:

canvas.controlsAboveOverlay = true;

Answer 2

The problem here is that overlay image is rendered on top of objects' controls. This is expected behavior. Take a look at this wiki article, which shows the z-index of various things on fabric canvas and in which order they're rendered.

There are plans to add support for object controls that are always on top, as you can see from this ticket, but I can't tell you when that's going to happen.

You can also try using "after:render" callback and draw image manually onto canvas.