I have a canvas
created in principle with a background image, to which from a button I add a marker (a normal and current image) over the background, the subject is, if I click on the background, I leaves the marker unused, having to move it completely until the marker is uncovered by the bottom.
If I click on the marker and move it, without problems. If I click before on the bottom and then on the scoreboard, it's when I'm not allowed to move the scoreboard anymore.
I've seen options with BringToFront
and setOverlayImage
if I remember correctly, but they do not work exactly as I want.
The only thing I need is that you can only move the marker, even by clicking on the bottom, to be able to click on the marker again and move it.
With this function, I add the marker.
function addlocation () {
markerActivado = 'OK';
deselectAll();
var heightLocation = window.innerHeight / 2;
var widthLocation = window.innerWidth / 2;
var marker = 'img/mapas/locationRed2.png';
//canvas.setOverlayImage(marker, canvas.renderAll.bind(canvas), {overlayImageLeft: 200, overlayImageTop: 200});
fabric.Image.fromURL(marker, function (oImg) {
canvas.add(oImg);
oImg.hasBorders = true;
oImg.hasControls = true;
oImg.set({
name: "Marker",
left: widthLocation,
top: heightLocation - 120
});
canvas.setOverlayImage(oImg);
});
setTimeout(function () {
selectAll();
canvas.deactivateAll().renderAll();
resizeCanvas();
canvas.isDrawingMode = false;
canvas.sendToBack(canvas.item(0));
canvas.setOverlayImage(canvas.item(1));
}, 210);
}