Dynamic Canvas - Add Text

by MULLAINATHAN MANICKAM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>
<button id="addText">
Add Text
</button>

CSS

canvas {
    border: 1px solid #ccc;
}

JavaScript

var canvasStr = '';
 var canvasArray = [];
 var fabricCanvasArray = [];
 var htmlStr = '';
 var canvas = null;
 var activeCanvas = '';
 
 //generate canavases 
 for (var i = 0; i < 4; i++){
 			canvasArray.push('c' + i);
 			htmlStr += '<canvas id="c' + i + '" width="200" height="200"></canvas>'
 }
 //append canvasses to the body
 $('body').append(htmlStr);
 
 //to the fabricjs parent div elements assign id's and generate string for jQuery with div id's
 for (var i in canvasArray){
 		fabricCanvasArray[i] = new fabric.Canvas(canvasArray[i], {
    isDrawingMode: false
 		});
 
 		$('#' + canvasArray[i]).parent().attr('id', ('div' + canvasArray[i]));
   	canvasStr += '#div' + canvasArray[i];
   	if (i < canvasArray.length - 1){
  			canvasStr += ',';
    }
 }

//jQuery event for mouse over each div element of the fabric canvas
 $(canvasStr).mouseup(function(){
     for (var i in fabricCanvasArray){
        if (fabricCanvasArray[i].lowerCanvasEl.id == $(this).children(':first').attr('id')){
        activeCanvas = fabricCanvasArray[i];
        console.log(activeCanvas);
       	break;
     }
   }
});

$("#addText").on('click', function(e){
	if(activeCanvas) {
    var text = new fabric.Text('Canvas ', {
      left : '0',
      top : '0'
    });
		activeCanvas.add(text).renderAll();
      console.log(activeCanvas);
  }
});