QML doodle canvas

mspaint.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    id: msPaint
    visible: true
    width: 640
    height: 480
    title: qsTr("MoeSoftPaint")

    property real lastPosX
    property real lastPosY
    property bool drawing: false

    Canvas {
        id: paintCanvas
        anchors.fill: parent
        onPaint: {
            var ctx = getContext("2d");
            ctx.strokeStyle = 'rgba(0, 128, 128, 1)';
            if (drawing) {
                let curPosX = mouse.mouseX;
                let curPosY = mouse.mouseY;
                ctx.beginPath();
                ctx.moveTo(lastPosX, lastPosY);
                ctx.lineTo(curPosX, curPosY);
                ctx.stroke();
                ctx.closePath();
                lastPosX = curPosX;
                lastPosY = curPosY;
            }
        }

        MouseArea {
            id: mouse
            anchors.fill: parent
            onPressed: {
                lastPosX = mouseX;
                lastPosY = mouseY;
                drawing = true;
            }
            onReleased: {
                drawing = false;
            }
            onPositionChanged: {
                paintCanvas.requestPaint();
            }
        }
    }
}