<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
  </head>

  <body>
    <h1>fabricjs, text follow cursor, enter text edit<small>eligeske</small></h1>
    <label>Font Size:</label>
    <select id="fontSize">
      <option>5</option>
      <option>8</option>
      <option>12</option>
      <option>15</option>
      <option>18</option>
      <option>22</option>
      <option selected>24</option>
      <option>48</option>
    </select>
    <div id="my_cont" style="height: 500px; width: 500px; border: 1px dashed blue">
      <canvas id="canvas" style="border: 2px solid #ccc;box-sizing: border-box"></canvas>
    </div>
    <script src="demoSetup.js"></script>
    <script>
      
    </script>
  </body>

</html>
// Code goes here

var $cont = $('#my_cont'),
    $select = $('#fontSize'),
    $canvasEle = $('#canvas'),
    canvasF = new fabric.Canvas($canvasEle[0]);


var cursor = new fabric.Text("Aa");
        cursor.lockScalingX = true;
        cursor.lockScalingY = true;
        cursor.lockUniScaling = true;
        cursor.setFontSize(24);

canvasF.add(cursor);

var hoverTarget = {
  obj: null,
  type: null
};

canvasF.on('mouse:move', function(evt){
  cursor.set({
    left: evt.e.layerX,
    top: evt.e.layerY
  });
  canvasF.renderAll();
});
canvasF.on('mouse:down', function(evt){
  
  var t = newITextFromText(cursor);
  canvasF.add(t).setActiveObject(t);
  t.enterEditing();  
  
});

var newITextFromText = function (textObj) {
  return new fabric.IText("",{
    top: textObj.top,
    left: textObj.left,
    fontSize: textObj.fontSize,
    fontFamily: textObj.fontFamily
  });
}

$select.change(function(){
  cursor.setFontSize($(this).val());
});


/*************************/
/* CANVAS ****************/
/*************************/

function scale (number){
  canvasF.setZoom(number);
  canvasF.setWidth($cont.width()*number);
  canvasF.setHeight($cont.height()*number);
}

scale(1);




/* Styles go here */

ul li { display: inline-block; border: 1px solid #ccc; cursor: pointer; padding: 5px 15px; }

ul li.active { color: #fff; background-color: black; }  

canvas {
  cursor: none !important;
}
small {
  display: block;
  color: #ccc;
  font-weight: normal;
  font-style: italic;
}