Canvas context fails to draw using selected strokeStyle when being assigned to Item property

import QtQuick 2.0

Item {
    id: theArc
    antialiasing: true
    property int thickness
    property color bgColor
    property color fillColor

    property real minimumValue: 0
    property real maximumValue: 100
    property real currentValue: 0

    onBgColorChanged:   theCanvas.requestPaint()
    onFillColorChanged: theCanvas.requestPaint()

    Timer
    {
        interval: 500
        repeat: true
        running: true
        onTriggered: {
            var v = currentValue+10
            if(v > maximumValue )
                v = minimumValue
            currentValue = v
        }
    }

    Canvas {
        id: theCanvas

        anchors.fill: theArc
        antialiasing: true
        renderTarget: Canvas.Image //Very importend for antialiasing!!!

        property point center: Qt.point( theCanvas.width/2, theCanvas.height/2 )
        property real  radius: Math.min(theCanvas.width, theCanvas.height)/2 - thickness/2

        // percentage of value between min/max as 0 to 1.0
        property real pct: (currentValue - minimumValue) / (maximumValue - minimumValue)

        property real startAngle: -1.25*Math.PI
        property real endAngle:    0.25*Math.PI

        onPctChanged: theCanvas.requestPaint()

        onPaint: {
            var ctx = theCanvas.getContext("2d");
            ctx.clearRect(0,0, 2*radius, 2*radius)

            ctx.beginPath();
            ctx.arc(center.x, center.y, radius,
                    startAngle, endAngle );
            ctx.lineWidth   = thickness;
            ctx.strokeStyle = bgColor; // Using property bgColor does only work for the first drawing, using "blue" instead works for any subsequent drawing too !?!?
            ctx.stroke();
            ctx.closePath();

            ctx.beginPath();
            ctx.arc(center.x, center.y, radius,
                    startAngle, startAngle + pct*(endAngle-startAngle) );
            ctx.lineWidth   = thickness*0.5;
            ctx.strokeStyle = "red";
            ctx.stroke();
            ctx.closePath();

            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(2*radius,2*radius);
            ctx.lineWidth   = thickness*0.5;
            ctx.strokeStyle = "red"; // either use "blue" above or change this one to "yellow" to get it working again !?!?
            ctx.stroke();
            ctx.closePath();
        }
    }
}

            ctx.strokeStyle = bgColor; // Using property bgColor does only work for the first drawing, using "blue" instead works for any subsequent drawing too !?!?

            ctx.strokeStyle = "blue"; // Using property bgColor does only work for the first drawing, using "blue" instead works for any subsequent drawing too !?!?

            ctx.strokeStyle = "red"; // either use "blue" above or change this one to "yellow" to get it working again !?!?

            ctx.strokeStyle = "yellow"; // either use "blue" above or change this one to "yellow" to get it working again !?!?