Canvas doesn't paint at the correct size under certain circumstances

import QtQuick 2.1

Rectangle {
    width: 200
    height: 200

    MouseArea {
        id: showBoundsCheckBox
        anchors.horizontalCenter: parent.horizontalCenter
        width: 100
        height: 40
        onClicked: checked = !checked

        property bool checked: false

        Rectangle {
            anchors.fill: parent
            color: "transparent"
            border.color: "black"
        }

        Text {
            text: (showBoundsCheckBox.checked ? "Hide" : "Show") + " bounds"
            anchors.centerIn: parent
        }
    }

    Item {
        implicitWidth: 32
        implicitHeight: implicitWidth
        // This works: implicitHeight: 32
        anchors.centerIn: parent

        Canvas {
            id: canvas
            width: Math.max(1, Math.min(parent.width, parent.height))
            height: width
            // This never paints at all: width: parent.height
            // This works: width: parent.width
            // This works: height: Math.max(1, Math.min(parent.width, parent.height))

            onWidthChanged: print("canvas width=", width)
            onHeightChanged: print("canvas height=", height)

            onPaint: {
                print("painting canvas at width=", width, "height=", height)

                var ctx = getContext("2d");
                ctx.reset();
                ctx.beginPath();
                ctx.fillRect(0, 0, width, height);
            }

            Rectangle {
                anchors.fill: parent
                color: "transparent"
                border.color: "darkorange"
                visible: showBoundsCheckBox.checked
            }
        }
    }
}