javascript - キャンバスの同じパスで2つの異なるストロークスタイルを使用することは可能ですか？

Question

線のストロークが異なるパスをキャンバスに作成することはできますか？たとえば、4つの異なる色のエッジで、内側が緑色のボックスを描画できます。いくつかのコードを含めましたが、パスが2回描画されるため（1回目は未完成のパス、2回目はパス全体）、機能しません。

JavaScript

window.onload = function()
{
    canvas = document.getElementById("canvas1");
    if (canvas.getContext)
    {
        ctx = canvas.getContext("2d");
        ctx.beginPath();                
        ctx.save();                
        ctx.moveTo(0, 0);
        ctx.strokeStyle = "rgb(255, 0, 0)";            
        ctx.lineTo(100, 100);
        ctx.stroke();
        ctx.strokeStyle = "rgb(0, 0, 255)";
        ctx.lineTo(200, 100);
        ctx.stroke();                
        ctx.restore();
    }                
}

HTML

<canvas id = "canvas1" width = "400" height = "400">
    Your browser does not support the HTML5 canvas tag.
</canvas>