Dibuja otro borde en línea en el lienzo

Question

Tengo un problema.Necesito dibujar otro borde en mi lienzo.Si intento esto:

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

No funciona porque todas las líneas tienen un borde verde.¿Me puedes ayudar?

--- Editar:No puedo cerrar el parche cuando cierro mi línea porque esta forma de dibujo de línea.Cuando cierro el parche mi forma no es correcta.¿Quizás otras ideas?

Answer 1

c2.stroke(); vuelve a dibujar todo el trazado hasta ese punto con el estilo de trazo actual.Entonces, al final, solo se aplicará el último estilo.

Intenta agregar c2.closePath(); seguido por c2.beginPath() después de cada c2.stroke() para comenzar una nueva ruta que puede tener un estilo de trazo separado.

Por ejemplo:

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