title: Draw line to route around shapes in HTML Canvas
body: <p>I'm using KineticJS to building an organization chart; one of the main requirements is the ability to have lines which are intelligent enough not to get overlapped by the shapes they are connecting. I have an algorithm for detecting the shortest path between two shapes, but I'm still stuck on how to route them around around any shapes in the way.</p>
  
  <p>The best solution I've come up with so far is to use getIntersection() on every single point on the line to make sure that no point contains more than just the line; but after doing that (which itself feels more than a little wasteful), I'm still not sure what the best way of then routing around the obstacle is.</p>
  
  <p>I'm open to the idea of switching libraries if there's another one which can accomplish this task easily, or even going back to a pure vanilla JS implementation if that's what it takes.</p>
  
  <p><img src="https://i.stack.imgur.com/O9rgG.png" alt="What I have currently"></p>