QML: using canvas in RadioButtonStyle

Using Canvas

inside a RadioButtonStyle

doesn't seem to work. Consider this simple example:

// MyRadioButton.qml
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3

RadioButton {
    id: base
    implicitHeight: 24

    style: RadioButtonStyle {
        spacing: 4

        indicator: Canvas {
            id: circle
            anchors {
                left: parent.left
                verticalCenter: parent.verticalCenter
            }

            height: 16
            width: 16

            antialiasing: true
            enabled: control.enabled

            property bool hovered: control.hovered
            property bool checked: control.checked | control.pressed
            property color color: update()

            onHoveredChanged: update()
            onCheckedChanged: update()
            onColorChanged: requestPaint()

            function update() {
                if ( checked ) {
                    color = "blue";
                } else if ( hovered ) {
                    color = "green";
                } else {
                   color = "red";
                }
            }

            onPaint: {
                var ctx = getContext( "2d" );
                ctx.save();
                ctx.clearRect( 0, 0, width, height );

                ctx.fillStyle = color;

                print( "color:", color );

                ctx.beginPath();
                ctx.arc( height / 2, width / 2, 7, 0, 2 * Math.PI );
                ctx.fill();

                ctx.restore();
            }

            Behavior on color {
                ColorAnimation {
                    easing.type: Easing.InOutQuad
                }
            }
        }

        label: Text {
            anchors {
                left: parent.left
                verticalCenter: parent.verticalCenter
            }

            text: control.text
            color: control.hovered ? "red" : "black"

            Behavior on color {
                ColorAnimation {
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }
}

// main.qml
import QtQuick 2.4
import QtQuick.Window 2.0

Window {
    id: win
    width: 150
    height: 150

    MyRadioButton {
        text: qsTr( "A radio button" )
    }
}

      

        
        
        
      

    

RadioButton

behaves as expected in that the debug print operator reports the correct color - only nothing changes on the screen. RadioButton

initialized to the correct visual state, but then doesn't change after that.

If I change Canvas

to Rectangle

, then everything works as expected.

Can anyone see where I went wrong?