JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<input type="button" id="send-backward" value="send backward" />
<input type="button" id="bring-forward" value="bring forward" />
<input type="button" id="bring-Add" value="Add" />
<canvas id="design-canvas" width="500" height="300" style="border: 1px solid #000"></canvas>

JavaScript

canvas = new fabric.Canvas('design-canvas');

var text = new fabric.Text('hello world', { left: 125, top: 50 });
var text2 = new fabric.Text('sample text', { left: 125, top: 100 });
var rect = new fabric.Rect({
  left: 0,
  top: 0,
  fill: 'red',
  width: 200,
  height:200
});
var rect2 = new fabric.Rect({
  left: 0,
  top: 0,
  fill: 'blue',
  width: 200,
  height:200
});
//canvas.add(text, text2, rect);
canvas.add(rect);
canvas.add(text);
canvas.add(text2);
canvas.add(rect2);

$('#bring-Add').click(function() { 
var rect2 = new fabric.Rect({
  left: 0,
  top: 0,
  fill: 'green',
  width: 200,
  height:200
});
canvas.add(rect2);
     });
$('#send-backward').click(function() { 
    var activeObject=canvas.getActiveObject(),
        activeGroup=canvas.getActiveGroup();
    if (activeObject) {
    alert(activeObject);
       activeObject.sendBackwards();
        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) {
       // activeObject.bringForward();
        canvas.renderAll();
        }
    else if (activeGroup) {
          //canvas.getActiveGroup().forEachObject(function(o){canvas.bringForward(o); });
         // activeGroup.bringForward();
          canvas.renderAll();
        } 
     });