HTML5 / Canvas / Javascript - 在重叠的线条上绘制阴影

Question

我正在尝试用阴影绘制一条线，但是当该线与同一条线的不同部分重叠时，阴影似乎只出现在整条线的下方。

理想情况下，我想绘制线条然后应用样式（之后包括阴影），但是因为我是画布的新手，所以我不确定这是否可行。

JS小提琴：https://jsfiddle.net/ncdpn0um/

<canvas id="myCanvas" width="1200" height="600" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var points = [];
points.push({
    x:50,
    y:50
});
points.push({
    x:350,
    y:50
});
points.push({
    x:550,
    y:300
});
points.push({
    x:700,
    y:50
});
points.push({
    x:50,
    y:300
});
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (i = 1; i < points.length; i ++) {
    ctx.lineTo(points[i].x, points[i].y);
}
ctx.shadowColor = "rgba(0,0,0,.8)";
ctx.shadowBlur = 20;
ctx.lineWidth = 50;
ctx.stroke();
ctx.lineWidth = 48;
ctx.strokeStyle = 'red';
ctx.stroke();
</script>