キャンバスに並んで別の境界線を描く

Question

私は問題があります。私はキャンバスに別の境界線を描く必要があります。これを試してみると：

c2.beginPath();

c2.moveTo(0, 0);

c2.lineTo(0, 100);
c2.lineWidth = Number(sw) + 6;
c2.strokeStyle = "red";
c2.stroke();
c2.lineTo(100, 100);
c2.lineWidth = Number(sw) + 6;
c2.strokeStyle = "#00ec11";
c2.stroke();
c2.lineTo(0, 100);
c2.lineWidth = Number(ss) + 6;
c2.strokeStyle = "red";
c2.stroke();
c2.closePath();
c2.lineWidth = Number(sw) + 6;
c2.strokeStyle = "#00ec11";
c2.stroke();

c2.fill();

.

すべての行に緑の境界線があるため、機能していません。あなたは私を助けますか？

---編集： 私はできるようにすることができます。パッチを閉じると、私の形は正しくありません。もう一つのアイデア？

Answer 1

c2.stroke();現在のストロークスタイルでその時点まで全体のパスを再描画します。そのため、最後に、最後のスタイルのみが適用されます。

c2.closePath();とそれに続くc2.beginPath()を追加して、別のStrokestyleを持つことができる新しいパスを開始します。

例えば：

c2.lineTo(0, 100);
c2.lineWidth = Number(sw) + 6;
c2.strokeStyle = "red";
c2.stroke();
c2.closePath();

c2.beginPath();
c2.moveTo(0, 100);
c2.lineTo(100, 100);
c2.lineWidth = Number(sw) + 6;
c2.strokeStyle = "#00ec11";
c2.stroke();
c2.closePath();
. 
. 
.

.