How to send backward & bringforward a active group in fabricjs

Question

I am trying to send backward & bring forward a active object/active group on click of button in fabric js , i am able send backward a active object but getting problem in group.
Here is my code

    $('#send-backward').click(function() { 
            var activeObject=canvas.getActiveObject(),
                activeGroup=canvas.getActiveGroup();
            if (activeObject) {
                canvas.sendBackwards(activeObject);
                canvas.renderAll();
                }
            else if (activeGroup) {
                  canvas.getActiveGroup().forEachObject(function(o){canvas.sendBackwards(o); });
//activeGroup.sendBackwards();
                  canvas.renderAll();
                } 
             });

    $('#bring-forward').click(function() { 
        var activeObject=canvas.getActiveObject(),
            activeGroup=canvas.getActiveGroup();
        if (activeObject) {
            canvas.bringForward(activeObject);
            canvas.renderAll();
            }
        else if (activeGroup) {
              canvas.getActiveGroup().forEachObject(function(o){canvas.bringForward(o); });
//activeGroup.bringForward();
              canvas.renderAll();
            }

         });

Jsfiddle with this code bring forward is ok but problem in send backward
and another code try is
jsfiddlethis code is working strange it make a copy of group

Thanks in advance for help

Answer 1

You can directly use activeGroup.sendBackwards() respective activeGroup.bringForward()

Answer 2

document.getElementById('tofront').addEventListener("click",enviarFrente);
function enviarFrente()
{
    var myObject = canvas.getActiveObject();
    canvas.bringToFront(myObject);
    canvas.discardActiveObject();
canvas.renderAll(); 
}


document.getElementById('toback').addEventListener("click",enviarFondo);
function enviarFondo()
{
  var myObject = canvas.getActiveObject();
  canvas.sendToBack(myObject);
  canvas.discardActiveObject();
canvas.renderAll(); 
}

document.getElementById('toAdelante').addEventListener("click",moverAdelante);
function moverAdelante()
{
  var myObject = canvas.getActiveObject();
  canvas.bringForward(myObject);
  canvas.discardActiveObject();
canvas.renderAll(); 
}

document.getElementById('toAtras').addEventListener("click",enviarAtras);
function enviarAtras()
{
  var myObject = canvas.getActiveObject();
  canvas.sendBackwards(myObject);
  canvas.discardActiveObject();
canvas.renderAll(); 
}