Important: Please read the Qt Code of Conduct -

QML Canvas Reload DrawImage

  • 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: {
                onImageLoaded: requestPaint()
                onPaint: {
                    var ctx = drawCanvas.getContext("2d");
                        firstLoad = false
                        ctx.drawImage(imgPath, 0, 0);
                        console.log("painting: " + mousearea.mouseX + " " + mousearea.mouseY)
                        drawCanvas.arrpoints.push({"x" : mousearea.mouseX, "y" : mousearea.mouseY})
                        ctx.strokeStyle = drawColor
                        ctx.lineWidth = lineWidth
                        ctx.moveTo(prevX, prevY);
                        ctx.lineTo(mousearea.mouseX, mousearea.mouseY);
                        prevX = mousearea.mouseX;
                        prevY = mousearea.mouseY;
                        //                }
                function clear(){
                    var ctx = drawCanvas.getContext('2d')

Log in to reply