FabricJS - Move to Top by Name

Select a Fabricjs object by its property value and adjust its layering.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://www.luggagepros.com/js/lib/lowdash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.js"></script>
<script src="http://promincproductions.com/gaTrackingJSFiddle.js"></script>
<div id="btnMoveTop" class="button">Move recctSecond to Top</div>

<div id="btnMoveBot" class="button">Move recctSecond to Bottom</div>

<p>&nbsp;</p>

<canvas id="c" width="400" height="400"></canvas>

CSS

canvas{
  border-width: 1pz;
  border-style: solid;
  border-color: #000;
}

.button{
  background-color: #026a05;
  color: #FFF;
  border: 1px solid green;
  width: 30%;
  margin-right: 2%;
  padding: 2%;
  display: inline-block;
  word-wrap: break-word;
  font-family: arial;
  cursor: pointer;
}

JavaScript

/* Setup Canvas | START */
var canvas = new fabric.Canvas('c');

var rectFirst = new fabric.Rect({
		width: 100,
    height: 100,
    fill: '#33778e',
    left: 20,
    top: 20,
    name: "rectFirstNameProperty"
});

var rectSecond = new fabric.Rect({
		width: 100,
    height: 100,
    fill: '#a53912',
    left: 70,
    top: 70,
    name: "rectSecondNameProperty"
});

var rectThird = new fabric.Rect({
		width: 100,
    height: 100,
    fill: '#429e48',
    left: 120,
    top: 120,
    name: "rectThirdNameProperty"
});

canvas.add(rectFirst, rectSecond, rectThird);
/* Setup Canvas | END */


for(var i=0; i< 30; i++)
{
  var rect = new fabric.Rect({
  	width:0,
    height:0,
    evented:false,
  })	
  canvas.add(rect)
  console.log(rect)
}

/* Javascript Functions | START */
function findObjectWithPropertyValue(canvas, propertyName, propertyValue) {
		var condition = {};
		condition[propertyName] = propertyValue;
		//return _(canvas.getObjects()).where( condition ).first()  /* _.where function deprecated as of v4.0.0 in favor of _.filter function */
    return _(canvas.getObjects()).filter( condition ).first()
}

function moveToTop() {
    var rectSecondObj = findObjectWithPropertyValue(canvas, 'name', 'rectSecondNameProperty');
    rectSecondObj.moveTo(15);
    console.log(canvas.getObjects().indexOf(rectSecondObj));
}

function moveToBottom() {
    var rectSecondObj = findObjectWithPropertyValue(canvas, 'name', 'rectSecondNameProperty');
    canvas.sendToBack(rectSecondObj);
}
/* Javascript Functions | END */


/* jQuery Document Listener */
$(document).ready(function(){
		$("#btnMoveTop").click(function(){
    		moveToTop();
    });
		$("#btnMoveBot").click(function(){
    		moveToBottom();
    });
});