Problem with FabricJS TextBox can't select and edit value & Layer Index is not working correctly

Question

I have a problem with Fabric Text Box: user can't select TextBox & edit value. And using function canvas.MoveTo to set image of cloud to index 2 & Text Box to index 7, I expect TextBox is above Image, but actually, the Text box is always display behind the cloud image.
Here is my code

var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

var canvas = new fabric.Canvas('editorCanvas', {
    backgroundColor: 'white',
    selectionLineWidth: 2,
    width: $("#canvasContainer").width(),
    height: $("#canvasContainer").height()
});

canvas.setBackgroundImage('https://futushigame.firebaseapp.com/Background.svg', canvas.renderAll.bind(canvas), {
    // Needed to position backgroundImage at 0/0
    originX: 'left',
    originY: 'top'
});

fabric.Image.fromURL("https://futushigame.firebaseapp.com/group5.svg", function(img) {
    img.left = 0.2;
    img.top = 54.94981;
    canvas.add(img);
    canvas.moveTo(img, 2);
    canvas.renderAll();
});

var textbox7 = new fabric.Textbox("LITTLE PRINCESS", {
    left: 0,
    top: -14.620352,
    width: 169.598436,
    fontSize: 19.3302,
    fontFamily: 'Nunito-Bold',
    fill: "#000000",
    editable: true,
});
textbox7.editable = true;
canvas.add(textbox7);
canvas.moveTo(textbox7, 7);
textbox7.transformMatrix = [1, 0, 0, 1, 64.7895, 169.1073];
textbox7.setCoords();
canvas.renderAll();

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

Answer 1

For moveTo index, better choose a number between 0 and number of object present in canvas.

And as I see you are changing left and top using tansformMatrix, so just set left and top to the object.

var canvas = new fabric.Canvas('editorCanvas', {
    backgroundColor: 'white',
    selectionLineWidth: 2,
    width: $("#canvasContainer").width(),
    height: $("#canvasContainer").height()
});

canvas.setBackgroundImage('https://futushigame.firebaseapp.com/Background.svg', canvas.renderAll.bind(canvas), {
    // Needed to position backgroundImage at 0/0
    originX: 'left',
    originY: 'top'
});

fabric.Image.fromURL("https://futushigame.firebaseapp.com/group5.svg", function(img) {
    img.left = 0.2;
    img.top = 54.94981;
    canvas.add(img);
    canvas.moveTo(img, 0);
    canvas.renderAll();
});

var textbox7 = new fabric.Textbox("LITTLE PRINCESS", {
    left: 64.7895,
    top: 154.4856948,
    width: 169.598436,
    fontSize: 19.3302,
    fontFamily: 'Nunito-Bold',
    fill: "#000000",
    editable: true,
});
canvas.add(textbox7);
canvas.moveTo(textbox7, 1);
//textbox7.transformMatrix = [1, 0, 0, 1, 64.7895, 169.1073];
textbox7.setCoords();
canvas.renderAll();

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>