How to keep image at the back of the canvas when moving elements with fabric.js?

Question

I have a large image loaded initially into my canvas, and then I would like to be able to draw rectangles over it. When I drag the image around, I still want the rectangles to appear over the image, instead of them being pushed to the back.

Here is a plunk;

http://plnkr.co/edit/iJV0bZrlCG4CJXlhDw8w?p=preview

If possible, I would like to be able to ensure that no matter what, the image is always at the back? I've looked around quite extensivley, and cannot find a solution. It is becoming increasingly frustrating!

Initially I thought it would be as simple as this;

canvas.on('object:moving', function(e) {

  var obj = e.target;
  console.log(obj.id)
  if (obj.id === 'img') {
    canvas.sendToBack(obj)
  } else {
    canvas.bringToFront(obj)
  }


});

Hope someone can help!

Answer 1

Just pass in the preserveObjectStacking option and things will not jump to the front when selected.

window.canvas = new fabric.Canvas('c', { preserveObjectStacking:true });