Trying to draw connected rectangles

Question

I'm trying to draw 3 rectangles on the same y-axis. Each of the rectangles are to be connected by a line.

The rectangles are appearing as I'd like but I can't get the line to appear in the right spot

function Point(x,y){
    this.x=x;
    this.y=y;
}
Point.prototype.toPath = function(op) {return op+this.x+','+this.y;};

window.onload = function (){
    paper = Raphael(10, 50, 320, 200);

    paper.setStart();
    processes = [
        paper.rect(10, 10, 60, 40),
        paper.rect(110, 10, 60, 40),
        paper.rect(210, 10, 60, 40)
    ];

    p1 = new Point(
        processes[0][0].x.baseVal.value + processes[0][0].width.baseVal.value,
        processes[0][0].y.baseVal.value + (processes[0][0].height.baseVal.value / 2)
    );

    p2 = new Point(
        processes[1][0].x.baseVal.value,
        processes[1][0].y.baseVal.value + (processes[1][0].height.baseVal.value / 2)
    );

    paper.path(p1.toPath('M') + p2.toPath('H'));

    var set = paper.setFinish();
    set.attr({fill: "red"});
};

The result I'm expecting is something like

  ------         ------
 |      |_______|      |
 |      |       |      |
  ------         ------

but I'm getting something like this

  ------         ------
 |   ___|_______|      |
 |      |       |      |
  ------         ------

(please ignore my global variables - I'm trying to debug in console and I need them in the global scope)

Answer 1

You see, the problem is that Horizontal Line command takes only one parameter (docs). As your helper function always provides two parameters, after function evaluation you end up with something like this:

paper.path('M70,30H110,30');

Which obviously does not correspond to expected input.

You could change your helper functions to generate something like this:

paper.path('M70,30H110');

But in this case simplest solution is to use Line To command instead of Horizontal Line command (change H to L). Line To takes two arguments. So you would end up with something like this:

paper.path('M70,30L110,30');

In your code sample just change H to L.

...
paper.path(p1.toPath('M') + p2.toPath('L'));
...

See the fiddle here