javascript - パスの塗りつぶしは描画順序によって異なります

Question

Raphaël.js を使用して、別の三角形の内側に逆三角形を描画する必要があります。次の ASCII アートに似ています。

   /\
  /__\
 /\  /\
/__\/__\

唯一の違いは、回転を適用するために横向き (上が右) に描いていることです。

文字列に線を引く順序に応じてpath、中央が塗りつぶしの色で着色される場合とされない場合があります。

HTML

<div id="paper"></div>

CSS

div#paper {
    width: 200px;
    height: 200px
}

JavaScript（中身を埋める）

function triangles(paper, x, y, w, h, attr) {
    var cx = x + w / 2,
        cy = y + h / 2,
        path = ["M", x, y, "L", x + w, cy, x, y + h, "Z",
                "M", cx, y + h/4, "L", cx,
                y + h*3/4, x, cy, "Z"].join(" ");
    return paper.path(path).attr(attr);
}

var paper = Raphael(document.getElementById("paper"), 200, 200);
triangles(paper, 20, 20, 80, 80, {
    fill: "#abcabd"
});

JavaScript（中は空欄）

function triangles(paper, x, y, w, h, attr) {
    var cx = x + w / 2,
        cy = y + h / 2,
        path = ["M", x + w, cy, "L", x, y, x, y + h, "Z",
                "M", cx, y + h/4, "L", cx,
                y + h*3/4, x, cy, "Z"].join(" ");
    return paper.path(path).attr(attr);
}

var paper = Raphael(document.getElementById("paper"), 200, 200);
triangles(paper, 20, 20, 80, 80, {
    fill: "#abcabd"
});

---

唯一の違いは最初の 2 つの点であることに注意してください。

// Fills the inside:
"M", x, y, "L", x + w, cy
// Doesn't fill the inside:
"M", x + w, cy, "L", x, y

---

ラファエルの行儀の悪さの原因は何ですか?

数字が埋まるかどうかを事前に判断するにはどうすればよいですか?

---

デモ：jsFiddle

JavaScript の 2 つのブロック間でコメントを切り替えるだけです。