Changing Text Center

for number of uniform and name

by franknstayn

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<button class="changeView" value="1">View 1</button>
<button class="changeView" value="2">View 2</button>
<button id="dropText">Drop Text</button>
<button class="text-align" value="left">Left</button>
<button class="http://jsfiddle.net/franknstayn/wLtq43ux/25/#runtext-align" value="center">Center</button>
<button class="text-align" value="right">Right</button>
<button class="text-align" value="justify">justify</button>
<button id="changeText">change text</button>
<button id="objAlignCenter">aligncenter</button>

<button id="ungroup">ungroup</button>
<button id="delete">delete old</button>

<div style="text-align: center">
  <canvas id="canvas1"></canvas>
  <canvas id="canvas2"></canvas>
</div>

CSS

#canvas1 {
  border: 1px solid red;
}

#canvas2 {
  border: 1px solid blue;
}

JavaScript

var canvases = {};

var activeCanvas, canvas1, canvas2;

var activeIndex = 1;

$(document).ready(function() {

  for (var p = 1; p <= 2; p++) {
      canvases[p] = new fabric.Canvas('canvas' + p);
      
      canvases[p].on('object:selected', function(e) {
        console.log("selected");
        var f = canvases[activeIndex].getActiveObject();
       console.log(f);
      
      }); 
    }

  document.querySelectorAll('.text-align').forEach(function(btn) {
      btn.onclick = function() {
        canvases[activeIndex].getActiveObject().set('textAlign', this.value);
        canvases[activeIndex].renderAll();
      };
    });

  $("#ungroup").click(function() {
      var activeObject = canvases[activeIndex].getActiveObject();
      if (activeObject.type == "group") {
        var items = activeObject._objects;
        activeObject._restoreObjectsState();
        canvases[activeIndex].remove(activeObject);
        for (var i = 0; i < items.length; i++) {
           canvases[activeIndex].add(items[i]);
          canvases[activeIndex].item(canvases[activeIndex].size() - 1).hasControls = true;
        }
      
        canvases[activeIndex].renderAll();
      } 
      
    });

  $("#delete").click(function() {
      var objects = canvases[activeIndex].getObjects();
      for (var j in objects) {
        var id = objects[j].get('idnumber');
        if (id == "backnumber") {
          canvases[activeIndex].remove(objects[j]);
          break;
        }


      }
      canvases[activeIndex].renderAll();
    });

  $(".changeView").click(function() {
      var value = $(this).attr('value');

      if (value == 1) {
        activeCanvas = canvas1;


        $('#canvas1').parent().css('display', 'block');

        $('#canvas2').parent().css('display', 'none');

        activeIndex = 1;
      }

      if (value == 2) {
        activeCanvas = canvas2;

        $('#canvas1').parent().css('display', 'none');

        $('#canvas2').parent().css('display', 'block');
       ...