Fabric JS - send Objects to Back

Question

When you select an object (in my example a polygon), it gets automatically moved to the Front. I'm searching for a way to prevent the movement on the z-axis or send it backwards after the selection, maybe someone can help?

Here is a link to a simple example: http://jsfiddle.net/98cuf9b7/1/

When you select one of the Polygons, it gets moved to the Front. I tried to send it backwards after the selection, but even if the "canvas.sendToBack(object)" function is called, it's still remains in the Front.

The code in my Example is:

var canvas  = new fabric.Canvas('c');

var pol = new fabric.Polygon([
  {x: 200, y: 0},
  {x: 250, y: 50},
  {x: 250, y: 100},
  {x: 150, y: 100},
  {x: 150, y: 50} ], {
    left: 250,
    top: 150,
    angle: 0,
    fill: 'green'
  }
);

var pol2 = new fabric.Polygon([
  {x: 200, y: 50},
  {x: 200, y: 100},
  {x: 100, y: 100},
  {x: 100, y: 50} ], {
    left: 300,
    top: 200,
    angle: 0,
    fill: 'blue'
  }
);
canvas.add(pol, pol2);

canvas.on('object:selected', function(event) {
        var object = event.target;
        canvas.sendToBack(object);
        //object.sendToBack();
        console.log("OK");
  });

This is not a bug. See http://stackoverflow.com/questions/38247337/fabricjs-1-6-3-why-active-object-is-always-shown-on-top/38293440#38293440. — Ben, Nov 16 '16 at 00:27

score 21 · Answer 1 · edited Aug 26 '20 at 19:19

step 1 : You can Use preserveObjectStacking: true

step 2 : then use sendtoback,sendtofront....fabricjs options like below

Working Example with back and front working

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

var pol = new fabric.Polygon([{
  x: 200,
  y: 0
}, {
  x: 250,
  y: 50
}, {
  x: 250,
  y: 100
}, {
  x: 150,
  y: 100
}, {
  x: 150,
  y: 50
}], {
  left: 250,
  top: 150,
  angle: 0,
  fill: 'green'
});

var pol2 = new fabric.Polygon([{
  x: 200,
  y: 50
}, {
  x: 200,
  y: 100
}, {
  x: 100,
  y: 100
}, {
  x: 100,
  y: 50
}], {
  left: 300,
  top: 200,
  angle: 0,
  fill: 'blue'
});
canvas.add(pol, pol2);

var objectToSendBack;

canvas.on("selection:created", function(event){
  objectToSendBack = event.target;
});
canvas.on("selection:updated", function(event){
  objectToSendBack = event.target;
});

var sendSelectedObjectBack = function() {
  canvas.sendToBack(objectToSendBack);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js" integrity="sha512-T9uV3LxV54oKVYSwORGeHdJ1Ti0WcQvDjAaTvMS6+qfrI5ZRzwxfXVzr7fqodTjfZ6wtbreT5A+65ykwbp4DOw==" crossorigin="anonymous"></script>


<canvas id="c" width="500" height="300" style="margin-top:-150px;"></canvas>

<button height="60" style="margin-left:200px;" onclick="sendSelectedObjectBack()"> Send Back </button>

`preserveObjectStacking: true` do the changes in realtime . :) — Mohamed Raza, May 30 '23 at 20:51

score 12 · Accepted Answer · answered Nov 15 '16 at 09:39

Ok so this is happening because of the Fabric version you are using. In fiddle as i can see you have use version0.9. So it seems to be the default behaviour that whenever an object is selected its z-index is changed such that its on the top/front. Try using a later version. In other versions this issue is not there if an object is at the back it remains at the back even if you select it. Here is a the demo with a later version(1.4.0). Here whenever you select the object it will be moved backwards. And if you comment out the sending backwards code it will remain in front if in front and at the back if at the back.

var canvas  = new fabric.Canvas('c');

var pol = new fabric.Polygon([
  {x: 200, y: 0},
  {x: 250, y: 50},
  {x: 250, y: 100},
  {x: 150, y: 100},
  {x: 150, y: 50} ], {
    left: 250,
    top: 150,
    angle: 0,
    fill: 'green'
  }
);

var pol2 = new fabric.Polygon([
  {x: 200, y: 50},
  {x: 200, y: 100},
  {x: 100, y: 100},
  {x: 100, y: 50} ], {
    left: 300,
    top: 200,
    angle: 0,
    fill: 'blue'
  }
);
canvas.add(pol, pol2);

canvas.on('object:selected', function(event) {
        var object = event.target;
        canvas.sendToBack(object);
        //object.sendToBack();
        console.log("Selected");
  });

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>

thanks for your reply :) In my own project I am using the new version, I created a fiddle with the new Version and it isn't working again: http://jsfiddle.net/z7koh0h4/1/ I think it's a bug, so I'll report this. :) thanks — Sophie D, Nov 15 '16 at 10:30

score 1 · Answer 3 · answered Dec 30 '21 at 11:51

1

var activeObj = canvas.getActiveObject();
canvas.sendToBack(activeObj);
canvas.renderAll();

answered Dec 30 '21 at 11:51

rstar kumawat

11
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 30 '21 at 11:52

Fabric JS - send Objects to Back

3 Answers3

Linked