如何将粗2D线渲染为多边形？

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

// 定义原始线条的顶点
const line = [
  { x: 100, y: 100 },
  { x: 200, y: 200 },
  { x: 300, y: 100 },
];

// 定义多边形的边数
const sides = 5;

// 计算多边形的顶点
const vertices = [];
const deltaAngle = Math.PI * 2 / sides;
for (let i = 0; i< sides; i++) {
  const angle = deltaAngle * i;
  const x = line[1].x + (line[0].x - line[1].x) / 2 + (line[2].x - line[1].x) / 2 * Math.cos(angle);
  const y = line[1].y + (line[0].y - line[1].y) / 2 + (line[2].y - line[1].y) / 2 * Math.sin(angle);
  vertices.push({ x, y });
}

// 绘制多边形
ctx.beginPath();
ctx.moveTo(vertices[0].x, vertices[0].y);
for (let i = 1; i< vertices.length; i++) {
  ctx.lineTo(vertices[i].x, vertices[i].y);
}
ctx.closePath();
ctx.fillStyle = 'blue';
ctx.fill();