only redraw on window resize!?

    Canvas {

        /*
        draw a circle that corresponds to the variable progress.
        progress goes from 1 to 0, so the circle has full circumference and then shrinks.
        */

        id: circleProgress
        anchors.fill: parent

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

            drawProgressCircle(ctx, progress);

            // those do not work, only window resizing shows the progress...:

            // circleProgress.paint();
            // circleProgress.requestPaint();
            // ctx.clearRect(0, 0, width, height);
        }

        function drawProgressCircle(ctx, progress) {

            var centreX    = width / 2
            var centreY    = width / 2
            var lineWidth  = diameter / 40
            // to start at top
            var startAngle = 1.5 * Math.PI

            ctx.beginPath();
            ctx.fillStyle = "black";
            ctx.lineWidth = lineWidth;
            ctx.lineCap   = "round";
            ctx.moveTo(centreX, centreY - diameter / 2); // move to highest point in circle

            // draw a circle that is full in the beginning, but as progress shrinks
            ctx.arc(centreX, centreY, diameter / 2 - lineWidth / 2, startAngle,
                    startAngle + 2 * progress * Math.PI, false);
            ctx.stroke();
            ctx.closePath();
        }
    }