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

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

<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>