QML Canvas Reload DrawImage

electronicsengineer8

I develop an app with a feature whiteboard, the canvas will catch mouse motion dan painting to canvas.
Then the user can save the last state, done by saving the last state to image/png.

The problem is when I load the last state, the canvas cannot load a fresh image event after I replace the screen (i use stack view).

Home Screen > Open Menu > Open Canvas > Load Last Draw (success) > User Draw New Line > Save (Image/png on disk already updated, success) > Back to Menu > Open Again Canvas > Load Last Draw (This the problem, canvas still draw previous one, not Image/png with User Draw New Line )

Canvas {
            id: drawCanvas
            anchors.fill: parent
            property bool firstLoad: true

            property var arrpoints : []
            onArrpointsChanged: console.log(arrpoints.length)

            MouseArea {
                id: mousearea
                anchors.fill: parent
                onPressed: {prevX = mouseX ; prevY = mouseY}
                onPositionChanged: drawCanvas.requestPaint();
            }
            Component.onCompleted: {
                loadImage(imgPath)
            }
            onImageLoaded: requestPaint()

            onPaint: {
                var ctx = drawCanvas.getContext("2d");
                if(firstLoad){
                    console.log("firtsLoad")
                    firstLoad = false
                    ctx.drawImage(imgPath, 0, 0);
                    ctx.save()
                }
                if(!firstLoad){
                    console.log("painting: " + mousearea.mouseX + " " + mousearea.mouseY)
                    drawCanvas.arrpoints.push({"x" : mousearea.mouseX, "y" : mousearea.mouseY})
                    ctx.beginPath();
                    ctx.strokeStyle = drawColor
                    ctx.lineWidth = lineWidth
                    ctx.moveTo(prevX, prevY);
                    ctx.lineTo(mousearea.mouseX, mousearea.mouseY);
                    ctx.stroke();
                    ctx.closePath();
                    prevX = mousearea.mouseX;
                    prevY = mousearea.mouseY;
                    //                }
                }
            }

            function clear(){
                var ctx = drawCanvas.getContext('2d')
                ctx.reset()
                drawCanvas.requestPaint()
            }
        }