How can I manage to move object between various layers?

Question

I need to move object between layers, actually I have a main working area (say shape of square) and inside this working area I have a similar shape (bleed shape) same of the outer one but smaller in size, something like this :

https://jsfiddle.net/p0hszz22/24/ [see circle, square, rectangle shapes]

//@ add main square
function addSquare() {
  clearThisCanvas();
  var square = new fabric.Rect({});
  canvas.add(square);
  addSquare1(); //call bleedline square
}

//@ add bleedline square
function addSquare1() {
  var square = new fabric.Rect({});
  canvas.add(square);
  centreOnCanvas(square);
}

So I got two objects on canvas, now my requirement is when I add any image and move that image(or any object) inside the working area the dotted line(bleed shape) should always be on above of my image, so that it shows the user hint that images or anything outside the bleed region will be ignored (present case : does not happened at all )

What I have tried :

1. I tried to change the order of these two shapes,and when I did the bleed shape hides itself when main shape(outer one) is selected.

2. I thought of making these shapes into a group but again no success.

How can I achieve this? all I need is to show the user as soon anything crosses the bleed line, it will not be considered. Any link to study or keywords that I can again look for or any suggestion or any example will be helpful.

Thanks

PS: sorry for code in fiddle actually it was just to setup things quickly.

Answer 1

Try using an overlay image for the bleeding shape, maybe that fit your needs. That image will always be on top of the other objects inside the canvas

canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png',
     canvas.renderAll.bind(canvas), {
        opacity: 0.5,
        width : 400, // your width
        height : 400, // your height
        originX: 'center',
        originY: 'center'
});