fabric 참고

window.onload = function() {
    // 캔버스 요소 주위에 래퍼 만들기 (캔버스 id = "canvas")
    var canvas = new fabric.Canvas('canvas').setWidth('700').setHeight('400');
    // 오브젝트 추가를 위한 버튼 받아오기
    var addRectBtn = document.querySelector('#addRect');
    // 페이지 추가를 위한 버튼 받아오기
    var addPageBtn = document.querySelector('#addPage');
    // 오브젝트 추가 버튼 function
    addRectBtn.addEventListener('click', function () {
        addRect();
        layerLoad();
    });
    // 페이지 추가 버튼 function
    addPageBtn.addEventListener('click', function () {
        pageLoad();
    });
    // 사각형 추가 function
    function addRect() {
        canvas.add(new fabric.Rect({
            left: Math.floor(Math.random() * 500) + 1  ,
            top: Math.floor(Math.random() * 230) + 1  ,
            fill: getRandomColor(),
            width: 200,
            height: 150
        }));
    }
    // 추가 된 객체 load
    function layerLoad() {
        // 추가 된 객체 리스트가 들어갈 공간 #layerList
        var layerList = document.querySelector('#layerList');
        // 추가 된 객체 갯수가 카운트되서 뿌려질 공간 #layerCount
        var layerCount = document.querySelector('#layerCount');
        // 캔버스에 모든 객체 가져 오기
        var layerObjects = canvas.getObjects();

        //layerList.innerHTML = '';
        // 캔버스에 모든 객체의 갯수를 layerCount안에 기록한다.
        layerCount.innerText = layerObjects.length;

        var i;
        for (i = 0; i < layerObjects.length; i ++){
            var layerObject = layerObjects[i];
            var fill = layerObject.fill,
                xCoord = Math.floor(layerObject.left),
                yCoord = Math.floor(layerObject.top);
            var listItem = document.createElement('li');
            listItem.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'lh-condensed');
            listItem.setAttribute('data-order', i);
            listItem.innerHTML =
                '<div>\n' +
                '            <h6 class="my-0">임시 오브젝트 이름</h6>\n' +
                '            <small class="text-muted" style="font-weight: 600;">사각형 <span style="color: '+ fill +'">' + fill + '</span></small>\n' +
                '            <small class="text-muted">위치 <span>' + xCoord + ' / '+ yCoord +'</span></small>\n' +
                '          </div>\n' +
                '          <span class="text-muted"><i class="fa fa-bars" aria-hidden="true"></i></span>';
            layerList.prepend(listItem);
        }
        $( "#layerList" ).sortable({
            stop : function (e, ui) {
                //console.log(ui.item[0].getAttribute('data-order'));
                var orderChangedTo = [];
                var arrayNum;
                var i = 0;
                $(this).children('li').each(function () {
                    arrayNum = parseInt($(this).attr('data-order'));
                    $(this).attr('data-order', layerObjects.length - i - 1);
                    orderChangedTo.unshift(layerObjects[arrayNum]);
                    i ++;
                });
                layerObjects = orderChangedTo;
                console.log(layerObjects);
                canvas.clear();
                for(var j = 0; j < layerObjects.length; j ++){
                    canvas.add(layerObjects[j]);
                }
            }
        });
    }

    function pageLoad() {
        // 추가 된 페이지 리스트가 들어갈 공간 #pageList
        var pageList = document.querySelector('#pageList');
        // 캔버스에 모든 객체 가져 오기
        var pageObjects = canvas.getObjects();

        var i;
        for (i = 0; i < pageObjects.length; i ++){
            var pageObject = pageObjects[i];
            var pageItem = document.createElement('li');
        }
        pageItem.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'lh-condensed');
        pageItem.setAttribute('data-order', i);
        pageItem.innerHTML =
            '<div>\n' +
            '          <small class="text-muted">저장내용 <span>' + pageObjects.length +'</span></small>\n' +
            '          </div>\n' +
            '          <span class="text-muted"><i class="fa fa-bars" aria-hidden="true"></i></span>';
        pageList.prepend(pageObjects);
        console.log(pageObjects.length);
    }

    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }


};