import QtQuick 2.0

Item {
    anchors.fill: parent
    width: parent.width
    height: parent.height
        Canvas {
            anchors.fill: parent
            width: parent.width
            height: parent.height
            id: canvas

            property real angle: -Math.PI/2

            states: State {
                when: mouseArea.pressed
                PropertyChanges { angle: 5*Math.PI/2; target: canvas }
                //angle = 5*Math.PI/2;
            }

            transitions: Transition {
                RotationAnimation {
                    property: "angle"
                    direction: RotationAnimation.Clockwise
                    easing.type: Easing.InOutCubic
                    duration: 700
                }
            }

            MouseArea{
                id: mouseArea
                anchors.fill: parent
            }

            onAngleChanged: requestPaint()

            onPaint: {
                var ctx = getContext("2d");
                ctx.reset();

                ctx.strokeStyle = Qt.rgba(0, 0, 0, 1);
                ctx.lineWidth = 10;
                ctx.beginPath();
                ctx.arc(width/2, height/2, width/2-10, -Math.PI/2, angle);
                ctx.stroke();

            }
        }
}