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 back

Answer 1

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);
}

 Send Back