JSFiddle - React, Tailwind, and code Playground

by Dinesh Singh

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" />
<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
});
canvas.add(text, text2, rect);

$('#send-backward').click(function() { 
    var activeObject=canvas.getActiveObject(),
        activeGroup=canvas.getActiveGroup();
    if (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();
        } 
     });