title: FabricJS on('object:selected') doesn't trigger consistently for lines
body: <p>I am currently  building a simple line drawing tool using FabricJs and canvas.</p>
  
  <p><strong>DRAW mode:</strong>  <em>Draw lines using the mouse</em> </p>
  
  <p><strong>DELETE mode:</strong>  <em>Click anywhere a line to delete it.</em> Using the fabric js   <code>on('object:selected')</code></p>
  
  <p>My issue is that DELETE mode is inconsistent, 
  Clicking on the top half deletes the line, clicking on the bottom half doesn't do anything. </p>
  
  <p><a href="https://i.stack.imgur.com/7AOWd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7AOWd.png" alt="CLickable"></a>
  <a href="https://i.stack.imgur.com/Rj2Sn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rj2Sn.png" alt="No clickable"></a></p>
  
  <p>Am I missing something? I have tried everything. </p>
  
  <p>Thanks for the help. </p>
  
  <p><strong>EDIT: ADDED snippet</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var isDrawing = true;
  var canvas = new fabric.Canvas('a', {
    selection: false
  });
  
  var grid = 30;
  
  // create grid
  //line
  var line, isDown;
  
  
  function createGrid(board) {
    for (var i = 0; i &lt; (600 / grid); i++) {
      board.add(new fabric.Line([i * grid, 0, i * grid, 600], {
        stroke: '#000',
        selectable: false
      }));
      board.add(new fabric.Line([0, i * grid, 600, i * grid], {
        stroke: '#000',
        selectable: false
      }))
    }
  }
  //create grids
  createGrid(canvas);
  
  //Button Toggle
  
  $("#draw").click(function() {
    isDrawing = true;
    DrawLine(canvas);
  });
  $("#erase").click(function() {
    isDrawing = false;
    EraseLine(canvas);
  });
  
  function DrawLine(board) {
  
  
  
    // add objects
    board.on('mouse:down', function(o) {
  
      isDown = true;
      var pointer = board.getPointer(o.e);
      var points = [Math.round(pointer.x / grid) * grid, Math.round(pointer.y / grid) * grid, pointer.x, pointer.y];
      line = new fabric.Line(points, {
        strokeWidth: 5,
        strokeDashArray: [5, 10],
        strokeLineCap: 'round',
        fill: '#005E7A',
        stroke: '#005E7A',
        originX: 'center',
        originY: 'center',
        hasControls: 'false',
        hasRotatingPoint: 'false',
        padding: 50,
        ///perPixelTargetFind: true,
        lockMovementX: true,
        lockMovementY: true,
  
      });
      line.setOptions({
        'selectable': false
      });
      board.add(line);
    });
  
    board.on('mouse:move', function(o) {
      if (!isDown) return;
      var pointer = board.getPointer(o.e);
      line.set({
        x2: pointer.x,
        y2: pointer.y
      });
      board.renderAll();
    });
  
    board.on('mouse:up', function(o) {
      var pointer = board.getPointer(o.e);
      isDown = false;
      line.set({
        x2: Math.round(pointer.x / grid) * grid,
        y2: Math.round(pointer.y / grid) * grid
      });
      board.renderAll();
    });
  
  }
  
  
  function EraseLine(board) {
  
    board.off();
  
    line.setOptions({
      'selectable': true
    });
    var eraseHandler = function(o) {
      console.log(o);
  
      board.remove(o.target);
  
    };
  
    board.on('object:selected', eraseHandler);
    board.renderAll();
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
    background-color: transparent;
    margin: 3px;
    width: 120px;
    height: 240px;
    border: 2px solid #ccc;
    padding-left: 0;
  }
  
  .boards {
    display: inline;
    padding-left: 0;
  }
  
  .boards canvas {
    list-style: none;
    display: inline-block;
    background-color: transparent;
    margin: 3px;
    width: 120px;
    height: 240px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"&gt;&lt;/script&gt;
  &lt;h1&gt;Fabric Js On selected mode &lt;/h1&gt;
  &lt;div class="boards"&gt;
    &lt;canvas id="a" width="120" height="240"&gt;&lt;/canvas&gt;
    &lt;br&gt;
    &lt;button id="draw"&gt;
          Draw MOde
          &lt;/button&gt;
    &lt;button id="erase"&gt;
         Erase Mode
          &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>