How I can clear canvas in QML?

Koljasha

Hello!
Sorry for my English I use translate.google
How I can clear canvas in QML?
For exemle I draw line in canvas and when I click on mousearea canvas should be cleaned, but it's not happening. Console log write fine.
This my exemple code:

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log("Click...");
            canvas.clear_canvas();
        }
    }


    Canvas {
        id: canvas
        anchors.fill: parent

        onPaint: {
            var ctx = getContext("2d");
            ctx.lineWidth = 3;
            ctx.strokeStyle = "red";

            ctx.beginPath();
            ctx.moveTo(10, 10);
            ctx.lineTo(500, 300);
            ctx.stroke();

            ctx.lineWidth = 3;
            ctx.strokeStyle = "blue";

            ctx.beginPath();
            ctx.moveTo(500, 300);

            ctx.lineTo(50, 200);
            ctx.stroke();
        }

        function clear_canvas() {
            var ctx = getContext("2d");
            ctx.reset();
            canvas.requestPaint();
        }
    }
}

Thank you

SGaist

Hi,

AFAICS, you clear the canvas and right after you request a repaint which will trigger the onPaint function.

Koljasha

@SGaist I'm sorry, I don't understand you. clear_canvas function is called when I click on mousearea (console.log prints "Click"), but the Canvas is not cleared.
I watched this lesson https://www.youtube.com/watch?v=CR2qQebqv6I, like almost all the same (if not to take a bunch of C ++).

Koljasha

@SGaist Thank you....
I do not understand English, an translate and me even more confused ... my function clear() again is the fact that it is written in onPaint, redraws the lines .....
I redid the test code a bit and it worked:

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        anchors.left: parent.left
        anchors.bottom: parent.bottom

        width: 70
        height: 30
        border.color: "black"

        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            text: qsTr("Paint")
            font.pointSize: 12
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                canvas.paint_canvas()
                console.log("Paint...")
            }
        }
    }

    Rectangle {
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        width: 70
        height: 30
        border.color: "black"

        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            text: qsTr("Clear")
            font.pointSize: 12
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                canvas.clear_canvas()
                console.log("Clear...")
            }
        }
    }

    Canvas {
        id: canvas
        anchors.fill: parent

        function paint_canvas() {
            var ctx = getContext("2d");
            ctx.lineWidth = 3;
            ctx.strokeStyle = "red";

            ctx.beginPath();
            ctx.moveTo(10, 10);
            ctx.lineTo(500, 300);
            ctx.stroke();

            ctx.lineWidth = 3;
            ctx.strokeStyle = "blue";

            ctx.beginPath();
            ctx.moveTo(500, 300);

            ctx.lineTo(50, 200);
            ctx.stroke();
            canvas.requestPaint();
        }

        function clear_canvas() {
            var ctx = getContext("2d");
            ctx.reset();
//            can be used
//            ctx.clearRect(0,0,300,200);
            canvas.requestPaint();
        }
    }
}

SGaist

Glad you found out and thanks for sharing !

Since you have it working now please mark the thread as solved using the Topic Tools button so there other forum users may know a solution has been found :)