Error copying previous path to another canvas by canvas

problem description

redraw the contents of the first artboard to the first artboard in figure 2 through the recording track, and there is a problem

the environmental background of the problems and what methods you have tried

clipboard.png

clipboard.png

related codes

/ / Please paste the code text below (do not replace the code with pictures)
track recording method:
drawPencilDown: function (e) {

            getCtx().lineJoin = "round";
            getCtx().lineCap = "round";
            getCtx().strokeStyle = _self.settings.strokeStyle;
            getCtx().fillStyle = _self.settings.strokeStyle;
            getCtx().lineWidth = _self.settings.lineWidth;
            //draw single dot in case of a click without a move
            getCtx().beginPath();
            getCtx().arc(e.pageX, e.pageY, _self.settings.lineWidth / 2, 0, Math.PI * 2, true);
            getCtx().closePath();
            getCtx().fill();
            //start the path for a drag
            getCtx().beginPath();
            getCtx().moveTo(e.pageX, e.pageY);
            line = _self.settings.lineWidth;//
            downX = e.pageX;//X
            downY = e.pageY;//Y
        },
        //
        drawPencilMove: function (e) {
            var len = selArr.length;
            
            if (len == 1) {
                saveInfo(getArr(), downX, downY, e.pageX, e.pageY, line);
            }
            //
            // _self.saveCtx(getCtx(), "round", "round", colorPen, colorPen, _self.settings.lineWidth, ex, ey);
            //
            if (missPen) {
                getCtx().lineWidth = 20
            }
            getCtx().lineTo(e.pageX, e.pageY);
            getCtx().stroke();
        },

reset track method:
function setNew () {

var canvastest = document.getElementById("canvasTest");
ctxtest = canvastest.getContext("2d");
// ctxtest.clearRect(0, 0, window.screen.width, window.screen.height);
canvastest.style.display = "block";
canvastest.width = 928;
canvastest.height = 406;
console.log("")
console.log(dataOld1)
for (var i = 0; i < dataOld1.length; iPP) {
    ctxtest.beginPath();
    ctxtest.moveTo(dataOld1[i].sx, dataOld1[i].sy);
    ctxtest.lineTo(dataOld1[i].ex, dataOld1[i].ey);
    ctxtest.closePath();
    ctxtest.lineJoin = "round";
    ctxtest.lineCap = "round";
    ctxtest.strokeStyle = dataOld1[i].c;
    ctxtest.lineWidth = dataOld1[i].w;
    ctxtest.stroke();
}

}

what result do you expect? What is the error message actually seen?

want to redraw the "4" of figure 1 to the first artboard in figure 2 (not the way the picture is drawn). Ask the great god for advice, thank you

Apr.01,2021

I know that the sx and sy of the current point of the canvas, track should be the ex and ey, of the last point.

Menu