SIMPLE: fabricjs,path object follow as cursor, mouse down place stamp of check mark, edit stamp size

<!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>Check 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 x = 30;
var y = 30;

var checkmarkPoints = "M 0 0 L -8 -9 Q -15 -8 -15 1 L 0 13 L 25 -20 Q 27 -26 20 -24 z";

var cursorOn = false;
var createCursor = function () {
  var cursor = new fabric.Path(checkmarkPoints, {
    fill: 'black'
  });
  cursor.lockScalingX = true;
  cursor.lockScalingY = true;
  cursor.lockUniScaling = true;
  return cursor;
}

var cursor = createCursor();

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

// LEAVE 
canvasF.wrapperEl.addEventListener('mouseleave',function(evt){
  console.log('on leave');
  canvasF.remove(cursor); cursorOn = false;
});
canvasF.wrapperEl.addEventListener('mouseenter',function(evt){
  console.log('on enter');
  if(!cursorOn) {
    canvasF.add(cursor);
    cursorOn = true;
  }
});


// MOVE
canvasF.on('mouse:move', function(evt){
  cursor.set({
    left: evt.e.layerX,
    top: evt.e.layerY
  });
  canvasF.renderAll();
});

// DOWN
canvasF.on('object:selected', function(evt){
  return false;
});
canvasF.on('mouse:down', function(evt){
  console.log(evt);
  if(evt.target){
    evt.target.selectable = false;
  }
  canvasF.selection = false;
  return false;
});
// UP
canvasF.on('mouse:up', function(evt){
  if(!cursorOn){ return; }  
  if (fabric.util.getKlass(cursor.type).async) {
    cursor.clone(function (clone) {
      canvasF.add(clone);
    });
  }
  else {
    canvasF.add(cursor.clone());
  }
  
});


$select.change(function(){
  cursor.scaleToHeight($(this).val());
  //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;
}