Circle.qml

import QtQuick 2.4

Item {
    id: thisCircle
    property string color: "black"
    property alias border: thisBorder

    property real renderWidth: width
    property real renderHeight: height

    property int horizontalAlignment: Text.AlignHCenter
    property int verticalAlignment: Text.AlignVCenter

    ShapeBorder {
        id: thisBorder
    }

    Canvas {
        id: thisCanvas
        contextType: "2d"
        renderStrategy: Canvas.Cooperative
        renderTarget: Canvas.FramebufferObject
        anchors.fill: parent

        onPaint: {
            var ctx = thisCanvas.context;
            ctx.reset();

            var x = thisCircle.x;
            var y = thisCircle.y;
            var w = thisCircle.renderWidth;
            var h = thisCircle.renderHeight;
            var centerX = adjustRenderX();
            var centerY = adjustRenderY();
            var radius = Math.sqrt(Math.pow(w*0.5, 2.0)+Math.pow(h*0.5, 2.0)) * 0.5;

            ctx.lineWidth = thisCircle.border.width;
            ctx.strokeStyle = thisCircle.border.color;
            ctx.fillStyle = thisCircle.color;

            ctx.moveTo(x, y);
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0.0, Math.PI*2.0, true);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }
    }

    onRenderHeightChanged: {
        thisCanvas.requestPaint();
    }

    onRenderWidthChanged: {
        thisCanvas.requestPaint();
    }

    onHorizontalAlignmentChanged: {
        adjustRenderX();
        thisCanvas.requestPaint();
    }

    onVerticalAlignmentChanged: {
        adjustRenderY();
        thisCanvas.requestPaint();
    }

    onScaleChanged: {
        thisCanvas.requestPaint();
    }

    onXChanged: {
        thisCanvas.requestPaint();
    }

    onYChanged: {
        thisCanvas.requestPaint();
    }

    onZChanged: {
        thisCanvas.requestPaint();
    }

    onWidthChanged: {
        thisCanvas.requestPaint();
    }

    onHeightChanged: {
        thisCanvas.requestPaint();
    }

    onClipChanged: {
        thisCanvas.requestPaint();
    }

    onColorChanged: {
        thisCanvas.requestPaint();
    }

    Component.onCompleted: {
        thisCanvas.requestPaint();
    }

    onVisibleChanged: {
        if (thisCircle.visible) {
            thisCanvas.requestPaint();
        }
    }

    function adjustRenderX() {
        var w = thisCircle.width;
        var rw = thisCircle.renderWidth;
        var x = thisCircle.x;
        var c = x + w;

        switch(thisCircle.horizontalAlignment) {
            case Text.AlignLeft:
                return x + (rw * 0.5);

            case Text.AlignRight:
                return (x + w) - (rw * 0.5);

            default:
            case Align.Text.AlignHCenter:
                return c - (rw * 0.5);
        }
    }

    function adjustRenderY() {
        var h = thisCircle.height;
        var rh = thisCircle.renderHeight;
        var y = thisCircle.y;
        var c = y + h;

        switch(thisCircle.verticalAlignment) {
            case Text.AlignTop:
                return y + (rh * 0.5);

            case Text.AlignBottom:
                return (y + h) - (rh * 0.5);

            default:
            case Text.AlignVCenter:
                return c - (rh * 0.5);
        }
    }
}

A 2d circle primitive for use in QtQuick-based applications.