Desenhe outra borda alinhada no Canvas

Question

Eu tenho um problema.Preciso desenhar outra borda na minha tela.Se eu tentar isso:

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();

não está funcionando porque todas as linhas têm borda verde.Pode me ajudar?

--- Editar:Não consigo fechar o patch quando fecho minha linha porque esta forma de desenho de linha.Quando fecho o patch, minha forma não está correta.Talvez outras ideias?

Answer 1

c2.stroke(); redesenha todo o caminho até aquele ponto com o strokeStyle atual.Então no final, apenas o último estilo será aplicado.

Tente adicionar c2.closePath(); seguido pela c2.beginPath() após cada c2.stroke() para iniciar um novo caminho que pode ter um StrokeStyle separado.

por exemplo:

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();
. 
. 
.