Fabric.js: Image controls behind an overlay image
canvas, fabricjs, javascript
Solution
Just set the boolean `controlsAboveOverlay`:
canvas.controlsAboveOverlay = true;
Problem
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?