title: Detect if Mouse is over an object inside canvas
body: <p>I have created a line inside a canvas element. I am looking for the easiest way to detect if the position of the mouse is inside the line, which is inside the canvas. </p>
  
  <p>I have used this function to see the position of the mouse inside the canvas, but I am very confused on how I should proceed. </p>
  
  <pre><code>function getMousePos(c, evt) {
              var rect = c.getBoundingClientRect();
              return {
                  x: evt.clientX - rect.left,
                  y: evt.clientY - rect.top
              };
          }
  </code></pre>
  
  <p>I have also looked at this topic <a href="https://stackoverflow.com/questions/21511383/fabricjs-detect-mouse-over-object-path">Fabricjs detect mouse over object path</a> , but it detects if the mouse is inside the canvas, not inside the object. </p>
  
  <p>The line that I create is a part of smaller lines, connected to each other. </p>
  
  <pre><code> for (var i = 0; i &lt; 140 ; i++) {
  
                  ctx.beginPath();
  
                  ctx.moveTo(x[i],y[i]);
                  ctx.quadraticCurveTo(x[i],50,x[i+1],y[i+1]);
                  ctx.lineWidth = 40;
  
                  ctx.strokeStyle = 'white';
                  ctx.lineCap = 'round';
                  ctx.stroke();
  
              }
  </code></pre>
  
  <p>where x[i] and y[i] are the arrays with the coordinates that I want.</p>
  
  <p>I hope my question is clear, although I am not very familiar with javascript. </p>
  
  <p>Thanks
  Dimitra</p>