title: Draw an arrow on HTML5 Canvas between two objects
body: <p>I'm working on concept maps application, which has a set of nodes and links. I have connected the links to nodes using the center of the node as reference. Since I have nodes with different size and shapes, it is not advisable to draw arrow-head for the link by specifying height or width of the shape. My approach is to draw a link, starting from one node, pixel by pixel till the next node is reached(here the nodes are of different color from that of the background), then by accessing the pixel value, I want to be able to decide the point of intersection of link and the node, which is actually the co-ordinate for drawing the arrow-head.</p>
  
  <p>It would be great, if I could get some help with this.</p>
  
  <p>Sample Code:
  <a href="http://jsfiddle.net/9tUQP/4/">http://jsfiddle.net/9tUQP/4/</a></p>
  
  <p>Here the green squares are nodes and the line starting from left square and entering into the right square is the link. I want the arrow-head to be drawn at the point of intersection of link and the right square.</p>