How could I draw a line inside several shapes in KineticJS? - algorithm

Question

In my application I have several shapes that intersect with each other, for example, Shape A, Shape B and Shape C. A need to draw a polyline from Shape A to Shape C through Shape B, so the line lies inside all the shapes and crosses them almost at center.
What is the most efficient way to implement this? Here is the code of example: http://jsfiddle.net/dselkirk/ZMUkE/.
I need to draw a yellow line, but not manually:
var stage = new Kinetic.Stage({
container: 'container',
width: 850,
height: 750
});
var layer = new Kinetic.Layer({
x: 0,
y: 0
});
var rect = new Kinetic.Rect({
x: 100,
y: 100,
width: 80,
height: 60,
fill: '#E67E22'
});
var rect2 = new Kinetic.Rect({
x: 640,
y: 70,
width: 40,
height: 70,
fill: '#3498DB',
});
var circle = new Kinetic.Circle({
x: 600,
y: 150,
radius: 70,
fill: '#2ECC71',
});
var polyOne = new Kinetic.Polygon({
x: 80,
y: 100,
points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93],
fill: '#9B59B6'
});
var polyTwo = new Kinetic.Polygon({
x: 100,
y: 160,
points: [-5, 0, 75, 0, 70, 10, 70, 60, 60, 90, 61, 92, 64, 96, 66, 100, 67, 105, 67, 110, 67, 113, 66, 117, 64, 120, 63, 122, 61, 124, 58, 127, 55, 129, 53, 130, 50, 130, 20, 130, 17, 130, 15, 129, 12, 127, 9, 124, 7, 122, 6, 120, 4, 117, 3, 113, 3, 110, 3, 105, 4, 100, 6, 96, 9, 92, 10, 90, 0, 60, 0, 10],
fill: '#e74c3c'
});
var imageObj = new Image();
imageObj.onload = function () {
var yoda = new Kinetic.Image({
x: 120,
y: 120,
image: imageObj,
width: 15,
height: 18
});
// add the shape to the layer
layer.add(yoda);
stage.add(layer);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
var imageObj2 = new Image();
imageObj2.onload = function () {
var dart = new Kinetic.Image({
x: 650,
y: 80,
image: imageObj2,
width: 20,
height: 21
});
layer.add(dart);
stage.add(layer);
};
var yellowLine = new Kinetic.Line({
points: [{x:125,y:140},{x:125,y:280}, {x:425,y:150}, {x:555,y:220}, {x:655,y:100}],
stroke: 'yellow',
strokeWidth: 2,
lineJoin: 'round',
dashArray: [33, 10]
});
layer.add(polyOne);
layer.add(polyTwo);
layer.add(yellowLine);
layer.add(circle);
layer.add(rect);
layer.add(rect2);
stage.add(layer);
yellowLine.moveToTop();
For now I think the algorithm should be:
1) Find intersection points of all shapes.
2) Draw lines between these intersectiopn points. If any line point lies outside the shape - move it horizontally/vertically till it lies inside the shape.
But this algorithm seems not efficient at all.