title: HTML5 Canvas: Use context.isPointInPath(x, y) for complex shapes with more paths
body: <p>I am drawing a complex shape, that consists of 6 thin lines and two thick line. </p>
  
  <p>In the code i am opening 8 pathes to do this:</p>
  
  <pre><code>        context.save();
      context.lineWidth=2;
      var TAB_ABSTAND=10;
      var TAB_SAITENZAHL=6;
      var TAB_SEITENDICKE=10;
      for(var i=0;i&lt;TAB_SAITENZAHL;i++)
      {
           context.beginPath();
           context.moveTo(this.clickedX, this.clickedY+(i*TAB_ABSTAND));
           context.lineTo(this.clickedX+this.width, this.clickedY+(i*TAB_ABSTAND));
           context.stroke();  
      }
  
  
  
       context.lineWidth=TAB_SEITENDICKE;
  
       context.beginPath();
       context.moveTo(this.clickedX, this.clickedY-1);
       context.lineTo(this.clickedX, this.clickedY+TAB_ABSTAND*(TAB_SAITENZAHL-1)+1);
       context.stroke();
  
       context.beginPath();
       context.moveTo(this.clickedX+this.width, this.clickedY-1);
       context.lineTo(this.clickedX+this.width, this.clickedY+TAB_ABSTAND*(TAB_SAITENZAHL-1)+1);
       context.stroke();    
  
       context.restore();     
  </code></pre>
  
  <p>In the canvas onmousedown event i want to recognize if the shape (or one of the other shapes in an array) have been clicked to realize a dragging.</p>
  
  <p>Is there a way to use the isPointInPath(x,y) Method to recognize if one of the Lines in the "Shape" has been clicked?</p>
  
  <p>What i want to do is to implement a mechanism that maintains a list of draggable objects. </p>
  
  <p>What i found out yet:</p>
  
  <p>1.) beginPath is the only context method that interrupts the path in a way, that the previous path is not recognized by the isPointInPath method</p>
  
  <p>2.) On a single line with big stroke (i.e. context.lineWidth=10) the isPointInPath method is not returning true when it is just a single line without curves </p>
  
  <p>3.) closePath draws the endpoint of the last line to the beginning point of the first line, but it is not interupting the path, so that a later stroke() always takes effect on the lineTo and moveTo-methods before the closePath</p>
  
  <p>4.) It seems to be impossible to draw a bigger line without calling beginPath() without stroking the rest of the pathes</p>
  
  <p>5.) moveTo(x,y) really jumps to another position, but the other position can be a path that returns true for the isPointInPath method, when it not only consists of one line (see 1.)).</p>
  
  <p>6.) To visualize pathes the fill() method is usefull</p>
  
  <p>So should i always use rectangles to draw lines when i want to recognize if the "line" (that is drawn as rect) is in Path?</p>