How to keep image behind another image when moved?

Question

Edit: Here I'm able to keep it in the back while selected but for some reason it's not dragable now. What might I be doing wrong?

I have the ability to upload an image from my computer and then to move the image around. My problem: When I select the image, it pops forward until I deselect it. Is it possible to have it remain BEHIND the image that I have it upload behind? Please see this JSFiddle of the problem. You'll notice that if you upload an image, the image pops forward above the frame—I want it to remain behind it when I move it, but still see the controls.

Thanks in advance!

var canvas = new fabric.Canvas('c');
var oImg, oImg2, isImageLoaded;

//initialize default frame (light brown wood oval)
fabric.Image.fromURL('https://i.imgur.com/DrzSWSa.png', function(img) {
  isImageLoaded = true;
  oImg = img.set({
    selectable: false,
  }).scale(0.5);
  canvas.add(oImg).renderAll();
  canvas.sendToBack(oImg);
});

//initialize some text
canvas.add(new fabric.IText('Some Text', {
  left: 475,
  top: 25,
  fontFamily: 'Monsieur La Doulaise',
  fontSize: 27,
  hasBorders: false,
  hasControls: false,
  selectable: true,
  lockRotation: true,
  lockMovementX: true,
  lockMovementY: true,
  align: 'mid',
  originX: 'center',
  originY: 'center',
  centeredScaling: true,
}));

//initialize Some More Text
canvas.add(new fabric.IText('Some More Text', {
  left: 475,
  top: 60,
  fontFamily: 'cinzel',
  fontSize: 27,
  hasBorders: false,
  hasControls: false,
  selectable: true,
  lockRotation: true,
  lockMovementX: true,
  lockMovementY: true,
  align: 'mid',
  originX: 'center',
  originY: 'center',
  centeredScaling: true,
}));

//oImgObj bread and butter, kudos @grunt
function replaceImage(oImgObj, imgUrl) {
  if (!isImageLoaded) return; //return if initial image not loaded
  var imgElem = oImgObj._element; //reference to actual image element
  imgElem.src = imgUrl; //set image source
  imgElem.onload = () => canvas.renderAll(); //render on image load
}

// Download canvas as image
$("#d").click(function() {
  $("#c").get(0).toBlob(function(blob) {
    saveAs(blob, "memorialportrait.jpg");
  });
});

// Upload an image to the canvas
document.getElementById('file').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function(f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function(img) {
      var oImg = img.set({
        left: 400,
        top: 102
      }).scale(.8);
      canvas.add(oImg);
      canvas.setActiveObject(oImg);
      var image = canvas.getActiveObject();
      image.moveTo(-1);
      canvas.discardActiveObject();
      canvas.renderAll();
      canvas.sendToBack(oImg);
    });
  };
  reader.readAsDataURL(file);
});

//fonts
document.getElementById('cinzel').addEventListener('click', function(e) {
  canvas.getActiveObject().set("fontFamily", "cinzel");
  canvas.renderAll();
});
document.getElementById('monsieurladoulaise').addEventListener('click', function(e) {
  canvas.getActiveObject().set("fontFamily", "Monsieur La Doulaise");
  canvas.renderAll();
});
document.getElementById('tangerine').addEventListener('click', function(e) {
  canvas.getActiveObject().set("fontFamily", "tangerine");
  canvas.renderAll();
});

// Upload link
$(function() {
  $("#upload_link").on('click', function(e) {
    e.preventDefault();
    $("#file:hidden").trigger('click');
  });
});

a.dropdown-item {
  cursor: pointer;
}

.btn {
  margin-top: 10px;
  cursor: pointer;
}

canvas {
  border: 1px solid #dddddd;
  border-radius: 4px;
  margin: 10px 0px 0px 12px;
  cursor: pointer;
}


/* Styling the upload link */

#upload_link {
  text-decoration: none;
}

#file {
  display: none;
}








  
    
      
      

      Add Photo
      
        
        
          
          Frame
          Oval Light Brown
          Oval Mid Tone Wood
          Oval Silver
          Rectangle Distressed White
          Rectangle Gold Scroll
          Rectangle Mid Tone Wood
          Rectangle Silver
          
          Font
          Cinzel
          Monsieur La Doulaise
          Tangerine

AndreaBogazzi · Accepted Answer

There are some basic reading to do before starting to work with fabricjs in the docs.

http://fabricjs.com/docs/

1) the selected object jumps on top but you can disable it setting preserveObjectStacking: true on the canvas.

2) if you need an image to stay always on top, use canvas.overlayImage = fabric.Image this will give you a top image that do not react to selection that you can use to mask other objects

How to keep image behind another image when moved?

Answers (1)

Related Questions