塗りつぶし図形の境目の問題

こんな描画コードを実行するとする。

CX.beginPath();
CX.moveTo(20, 20);
CX.lineTo(100, 20);
CX.lineTo(20, 100);
CX.fill();

CX.beginPath();
CX.moveTo(100,20);
CX.lineTo(100,100);
CX.lineTo(20,100);
CX.fill();

↓こんな結果を期待するのだけれども。

↓こうなる。境目がでてしまう。

ある程度単純な図形なら、いちいちパスを切らないでまとめてfillすればいいのだけれども、複雑な交差あったりすると、交差する部分が抜けてしまうので、そうしたくない場合は困る。

対策。

• 大きめに描く
• fillだけでなくstrokeも使って境目を消す。これ→ http://jsdo.it/gct256/ca5S
• fillにたよらない。これ→ http://jsdo.it/gct256/cgVl

大きめに描くのは結構面倒そう。