Canvas不会在同一行

Question

我正在创建我的gps曲目的热图，并且正在用画布进行一些战斗。我画了一条线，所有曲目的透明度都是10％，问题是画布并不想在一行上堆叠alpha，例如有了这个：

ctx.fillStyle = 'rgba(1,1,1,0.1)';
points.forEach(point => ctx.lineTo(point.x, point.y));
ctx.stroke();

无论曲目是否超过自身100次，

都无法按预期工作，颜色为rgba(1,1,1,0.1)

现在我可以分别绘制线的每一段，即：

points.forEach(point => {
  ctx.lineTo(point.x, point.y);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(point.x, point.y);
});

这正确地堆叠了彼此重叠绘制的线的alpha值，但它创建了一个新问题 - 线帽重叠。例如想象一下＆＃34; V＆＃34;。角落顶部会有一个小钻石形状，有重叠的线条。这创造了很多＆＃34;点＆＃34;我的热图。

关于如何解决这个问题的任何想法？