在HTML5画布上同时跟踪两条路径

Question

我的代码在灵性上等同于此代码段：

function drawComplicatedThing(ctx) {
    // black along
    ctx.moveTo(0, 0);
    for (let i = 0; i < 10000; i++) {
        let {x, y} = computeExpensive(i);
        ctx.lineTo(x, y);
    }
    ctx.strokeStyle = 'black';
    ctx.stroke();

    // red transpose
    ctx.moveTo(0, 0);
    for (let i = 0; i < 10000; i++) {
        let {x, y} = computeExpensive(i);
        ctx.lineTo(y, x);
    }
    ctx.strokeStyle = 'red';
    ctx.stroke();
}

我正在尝试通过批量调用笔划来优化代码。例如，我可以这样做：

computeExpensive

但请注意，现在我正在呼叫computeExpensive两次。这个速度较慢，但​​实际成本是实际上function drawComplicatedThing(ctx) { let ctx2 = ctx.independentCopy(); // <-- NOT REAL, but you get the idea ctx.moveTo(0, 0); ctx2.moveTo(0, 0); for (let i = 0; i < 10000; i++) { let {x, y} = computeExpensive(i); ctx.lineTo(x, y); ctx2.lineTo(y, x); } ctx.strokeStyle = 'black'; ctx.stroke(); ctx2.strokeStyle = 'red'; ctx2.stroke(); } 实际上是一个内联代码块，所以我们的优化会强制重复代码重复。

重构示例代码以避免代码重复很容易（只是将点缓存到数组中），但一般情况下可能存在条件绘图逻辑，并且在重复时重构很难。

如果我可以同时跟踪两条路径，那么解决此问题会很容易。像这样：

{{1}}

这种功能是否存在于HTML5中，或者我是否需要构建我的代码，只能一次跟踪一个路径？