HTML5 Canvas / Clip区域在一行中

Question

我想知道是否有任何解决方案可以将线条的笔划设置为裁剪区域的一部分。

我们可以像这样轻松设置剪裁区域：

this.upperCtx.save();
    this.upperCtx.beginPath();
    this.upperCtx.arc(0, 0, 40, 2 * Math.PI, false);
    this.upperCtx.clip();
    this.upperCtx.drawImage(this.downCanvas, 0, 0);
this.upperCtx.restore();

但我的问题是我正在尝试使用以下内容在行上创建剪辑区域：

this.upperCtx.save();
    this.upperCtx.lineWidth = 80;
    this.upperCtx.strokeStyle = '#ff0000';
    this.upperCtx.beginPath();
    this.upperCtx.moveTo(0, 0);
    this.upperCtx.lineTo(30, 30);
    this.upperCtx.stroke();
    this.upperCtx.clip();
    this.upperCtx.drawImage(this.downCanvas, 0, 0);
this.upperCtx.restore();

这不起作用。我做了一些搜索，但没有找到任何解决方案。

我认为该剪辑仅影响路径的“填充”部分，而不会影响路径。

如果有人有解决方案。谢谢！