title: Fabric JS Strange problem when handling mouse move over line object
body: <p>I'm developing an object drawing canvas that uses Fabric.js and i'm encountering some strange issues when trying to deal with lines.
  To make things clear, i've created a very simple jsfiddle that show what i'm seeing.
  It's an event inspector that checks if the mouse is over a line, over a square or nowhere.
  The objects are movable if you want, it's the same with fixed objects.
  As you can see, if you try to position your mouse around the square, it only fires an event when you actually put the pointer on the square.
  When you try to go near the line things change and we see a bigger area that fires this event.
  Am I making some trivial mistake, its a bug or something else that i didn't think of?
  Thank you all for your interest</p>
  <pre><code>var canvas = new fabric.Canvas('c');
  
  var square = new fabric.Rect({
                      left: 200,
                      top: 100,
                      width: 20,
                      height: 20,
                  });
  
  var line = new fabric.Line([0,0,100,100], {
    stroke: 'red',
    strokeWidth: 1,
  });
      
  canvas.add(square);
  canvas.add(line);
      
  canvas.on('mouse:move', (e)=&gt;{
      switch (e.target){
      case line:
      {
          console.log(&quot;Pointer over a line&quot;);
        canvas.backgroundColor=&quot;green&quot;;
          break;
      }
      case square:
      {
          console.log(&quot;Pointer over a square&quot;);
        canvas.backgroundColor=&quot;blue&quot;;
          break;
      }
      default:
      {
          canvas.backgroundColor=&quot;white&quot;;
          break;
      }
    }
    
    canvas.renderAll();
  });
  </code></pre>
  <p><a href="https://jsfiddle.net/arozgkct/3/" rel="nofollow noreferrer">https://jsfiddle.net/arozgkct/3/</a></p>