Как стилизовать closePath () на холсте?

Question

Я пытаюсь стилизовать closePath () на своем холсте, но не знаю, как это сделать, на самом деле я бы хотел, чтобы все строки имели другой стиль, поскольку этот вопрос позволяет придерживатьсяполучать разные цвета.!Как вы видите, у меня есть треугольник, как я могу иметь разные штрихи для каждой линии?Вот ссылка на Код Pen

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.strokeStyle = "red";
ctx.moveTo(20, 140); 
ctx.lineTo(120, 10);  
ctx.strokeStyle = "green";
ctx.lineTo(220, 140); 
ctx.closePath();  
ctx.strokeStyle = "blue";
ctx.stroke();

<canvas id="canvas"></canvas>

Answer 1

Вы должны иметь три строки как три отдельных пути.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 140); 
ctx.lineTo(120, 10); 
ctx.strokeStyle = "red";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(120, 10); 
ctx.lineTo(220, 140); 
ctx.strokeStyle = "green";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(220, 140); 
ctx.lineTo(20, 140); 
ctx.strokeStyle = "blue";
ctx.stroke();

<canvas id="canvas"></canvas>

Answer 2

Каждый сегмент должен быть окрашен.

function qsa(sel,par=document){return par.querySelectorAll(sel)}
window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
	draw();
}

class vec2d
{
	constructor(x=0,y=0)
	{
		this.x = x;
		this.y = y;
	}
}

function draw()
{
	var verts = [ new vec2d(20,140), new vec2d(120, 10), new vec2d(220,140) ];
	var colours = ['red', 'green', 'blue'];

	let can = qsa('canvas')[0];
	let ctx = can.getContext('2d');
	
	var numLineSegs = verts.length;
	for (var lineSegIndex=0; lineSegIndex<numLineSegs; lineSegIndex++)
	{
		var index1 = lineSegIndex;
		var index2 = (lineSegIndex+1)%verts.length;
		
		ctx.beginPath();
		ctx.strokeStyle = colours[index1];
		ctx.moveTo(verts[index1].x, verts[index1].y);
		ctx.lineTo(verts[index2].x, verts[index2].y);
		ctx.stroke();
	}
	ctx.closePath();
}

<canvas width=512 height=512></canvas>