javascript - キャンバス上で線/曲線を作成するために使用されるすべてのポイントをどのようにスケーリングしますか?

Question

mousedownとmousemoveイベントを介してキャンバスに描画されたすべてのポイントを記録しています。キャンバスのサイズが変更された場合 (たとえば、幅 100 x 高さ 200 で、ユーザーが幅 x 400 に変更した場合)、これらすべての点/線を新しい縮尺で再描画したいと考えています。これを行う適切な方法は何ですか？

現在、以下のようなコードを使用していますが、正しく描画されません。変な余分な線が引かれます。

mousedown点を保存するために、とで点を記録し、 でmousemove線を完了としてマークしmouseupます。

サイズ変更イベントで呼び出されます:

//The new ratios
var wRatio = canvas.width / oldWidth;
var hRatio = canvas.height / oldHeight;

//We need to scale and draw all our points
for ( var i = 0, last = savedPoints.length - 1; i < last; i++ ) {
    var start = savedPoints[ i ];
    var end = savedPoints[ i + 1 ];

    //We're at a new line
    if ( start === "stopline" ) continue;

    //We're finishing a previous line
    else if ( end === "stopline" ) {
        i++;
        continue;
    }

    //Resize them
    start.x = start.x * wRatio;
    start.y = start.y * hRatio;
    end.x = end.x * wRatio;
    end.y = end.y * hRatio;

    //These lines don't make a difference
    //savedPoints[ i ] = start;
    //savedPoints[ i + 1 ] = end;

    //Start recording
    context.beginPath();

    //Move the "pen" to the point
    context.moveTo( start.x, start.y );

    //Make the connection of the "line" with our data (I draw the lines originally this way to make more "natural")
    context.quadraticCurveTo( start.x, start.y, end.x, end.y );

    //This doesn't work either
    //context.lineTo( start.x, start.y, end.x, end.y );

    //Draw the line
    context.stroke();
}