HTML5 Canvas：有没有办法将笔画（及其宽度和大写）转换为路径？

Question

我需要做的是创建具有动态笔划宽度的贝塞尔曲线，例如10像素，并使用圆形线帽。我希望它成为进一步复杂填充程序的途径。

我试过以下哪个不起作用：

context.beginPath();
context.lineWidth = 10;
context.lineCap = 'round';
context.moveTo(10, 10);
context.quadraticCurveTo(10, 100, 200, 200);
context.save();
context.clip();
context.fillStyle = 'red';
context.fillRect(0, 0, 200, 200);
context.restore();

它使路径看起来像这样（图1）：

问题是它用直线关闭了路径（从10,10到200,200），而且它不关心行程宽度也不关心线帽。但我只需要注意其行程宽度和线帽的贝塞尔曲线，而不用直线关闭路径。

我希望路径看起来像这样（图2）：

我可以使用下面的代码绘制它：

context.beginPath();
context.strokeStyle = 'red';
context.lineWidth = 10;
context.lineCap = 'round';
context.moveTo(10, 10);
context.quadraticCurveTo(10, 100, 200, 200);
context.stroke();

除了上面的代码将其绘制为笔划。我可以将结果导出到路径以进行进一步的工作吗？