Dynamic Multiple Views , Canvas
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-md-12 row">
<div class="col-md-2">
<button id="addText"> Add Text </button>
</div>
<div class="col-md-10" id="multipleViewsDiv"></div>
</div> <br>
CSS
.canvas-div {
border : 1px solid #000;
height : 250px;
}
.dynamic-canvases {
border : 1px solid red;
}
JavaScript
var XML = '<?xml version="1.0" encoding="utf-8"?>';
XML += '<views>';
XML += '<view>';
XML += '<view_type>1</view_type>';
XML += '<canvas>';
XML += '<canvas_id>frontCanvas</canvas_id>';
XML += '</canvas>';
XML += '<canvas>';
XML += '<canvas_id>leftCanvas</canvas_id>';
XML += '</canvas>';
XML += '<canvas>';
XML += '<canvas_id>rightCanvas</canvas_id>';
XML += '</canvas>';
XML += '</view>';
XML += '<view>';
XML += '<view_type>2</view_type>';
XML += '<canvas>';
XML += '<canvas_id>frontCanvas</canvas_id>';
XML += '</canvas>';
XML += '<canvas>';
XML += '<canvas_id>leftCanvas</canvas_id>';
XML += '</canvas>';
XML += '<canvas>';
XML += '<canvas_id>rightCanvas</canvas_id>';
XML += '</canvas>';
XML += '</view>';
XML += '</views>';
XML += '</xml>';
var canvasArray = fabricCanvasArray = ctxArray = [];
var canvas = null;
var activeCanvas = activeObject = canvasStr = '';
var firstView = true;
$(XML).find('view').each(function() {
var canvasXMLCnt = 0;
var viewType = $(this).find('view_type').text();
var divID = 'dynamicDiv_'+viewType;
createDynamicDiv(divID);
var aLink = '<a href="javascript:void(0);" id="view_'+viewType+'"> View '+viewType+' </a>';
$("#multipleViewsDiv").append(aLink);
$(this).find('canvas').each(function() {
canvasXMLCnt++;
var canvasID = $(this).find('canvas_id').text();
var variable_DynamicCanvas = 'canvas_'+viewType+'_'+canvasXMLCnt;
var dynamicCanvas = document.createElement('canvas');
dynamicCanvas.id = variable_DynamicCanvas;
dynamicCanvas.className = 'dynamic-canvases';
var createdDiv = document.getElementById(divID);
createdDiv.appendChild(dynamicCanvas);
canvasArray.push(variable_DynamicCanvas);
});
});
function createDynamicDiv(divID) {
if ($('#'+divID).length == 0) {
var dynamicDiv = document.createElement('div');
dynamicDiv.id = divID;
...