QML context2d lineWidth

Question

I'm trying to make a circle of lines in a qml canvas, but when i change the lineWidth to something other than 1, it messes up the position of the strokes, so that they are extended into the center.

left:lineWidth=1 , right:lineWidth=2

screenshot

Canvas {
    id:spinner
    anchors.centerIn: parent
    width:400
    height: 400
    onPaint: {
        var ctx = getContext("2d");
        var x,y,rotx,roty
        ctx.reset();
        ctx.beginPath();

        for (var i=0;i<10;i++){
            rotx = Math.cos(Math.PI*2*i/10)
            roty = Math.sin(Math.PI*2*i/10)
            x = 10*rotx + this.width/2
            y = 10*roty + this.height/2
            ctx.moveTo( x , y )
            x = (10 + 10)* rotx + this.width/2
            y = (10 + 10)* roty + this.height/2
            ctx.lineTo( x , y )
            ctx.closePath()
        }
        ctx.lineWidth = 1;
        ctx.lineCap = "round";
        ctx.stroke();
    }
}

can someone help me?

Answer 1

There shouldn't be any need to use closePath() (assuming it works the same way as with html5-canvas). All this will do is to tell canvas to connect first point with last point. moveTo() will create the necessary sub-path.

Also, the calculations must be adjusted to use an inner and outer radius relative to center:

onPaint: {
    var ctx = getContext("2d");
    var x,y,rotx,roty, cx, cy, innerRadius, outerRadius, angle;
    ctx.reset();
    ctx.beginPath();

    cx = this.width/2;
    cy = this.height/2;
    innerRadius = 10;
    outerRadius = 100;

    for (var i=0;i<10;i++){
        angle = Math.PI*2*i/10;
        x = cx + innerRadius * Math.cos(angle);
        y = cy + innerRadius * Math.sin(angle);
        ctx.moveTo( x , y )

        x = cx + outerRadius * Math.cos(angle);
        y = cy + outerRadius * Math.sin(angle);
        ctx.lineTo( x , y )
    }
    ctx.lineWidth = 1;
    ctx.lineCap = "round";
    ctx.stroke();
}