Multiple Canvas - Dynamic

by MULLAINATHAN MANICKAM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.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">

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 = [];
var ctxArray = [];
$(XML).find('view').each(function() {
	var viewType = $(this).find('view_type').text();
  var canvasXMLCnt = 0;
	$(this).find('canvas').each(function() {
  	canvasXMLCnt++;
  	var canvasID = $(this).find('canvas_id').text();
    var dynamicCanvasID = canvasID+'_'+viewType;
    var divID = 'dynamicDiv_'+viewType;
    createDynamicDiv(divID);
    var dynamicCanvas = document.createElement('canvas');
    dynamicCanvas.id = dynamicCanvasID;
    var createdDiv = document.getElementById(divID);
    createdDiv.appendChild(dynamicCanvas);
    $("#"+dynamicCanvasID).css({ 'border':'1px solid', 'width':'200', 'height':'200' });
    var variable_DynamicCanvas = 'canvas_'+viewType+'_'+canvasXMLCnt;
    canvasArray[variable_DynamicCanvas] = new fabric.Canvas(dynamicCanvasID,{
    	width : '200',
      height : '200',
      //isDrawingMode : true,
      id : variable_DynamicCanvas
    });
    
    canvasArray[variable_DynamicCanvas].observe('mouse:over', observeCanvasMouseOver);
    canvasArray[variable_DynamicCanvas].observe('mouse:out', observeCanvasMouseOut);
   ...