Draw line to route around shapes in HTML Canvas

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.

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.

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.

To work with your current solution, you would need to create vertical and horizontal "gutters" between each shape that you can use when drawing your connectors.

Think of these gutters as conduit that you run your connecting wires through.

You will likely have multiple and overlapping connectors in your gutters.

You could color code the connectors for easy identification by your users.

Alternatively:

This canvas diagraming library was created by frequent StackOverflow contributor, Simon Sarris:

http://www.nwoods.com/company/aboutus.htm

Alternatively:

JSPlumb is a javascript based diagamming library

http://jsplumbtoolkit.com/jquery/demo.html