Drawing circle and 3 lines connecting the circle using canvas in QML

Question

I am trying to understand QML Canvas

I want draw a circle with radial gradient and 3 lines connecting the circle from a point outside the circle.

Here's what is expected:

Here's the code:

Window {
id: root
visible: true
width: 640
height: 480
title: qsTr("Hello World")
color: "black"


Rectangle {
    color: "black"
    anchors.fill: parent
    Canvas {
        id: canvas
        anchors.fill: parent
        width: parent.width
        height: parent/1.3
        opacity: 0.5
        onPaint: {
            var ctx = getContext('2d');
            var offset = canvas.height/3
            var x = canvas.height/2 + offset,
            y = canvas.height/2,
            // Radii of the white glow.
            innerRadius = 5,
            outerRadius = y-10,
            // Radius of the entire circle.
            radius = canvas.height/2;
            //Draw the circle with gradient
            var gradient = ctx.createRadialGradient((x+(x*0.25)), (y+(y*0.25)), innerRadius, x, y, outerRadius);
            gradient.addColorStop(0, '#232323');
            gradient.addColorStop(1, '#6E6E6E');
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.fillStyle = gradient;
            ctx.fill();

            ctx.lineWidth = 1
            ctx.strokeStyle = "grey"
            ctx.beginPath()
            //Straight line
            ctx.moveTo(0, y)
            ctx.lineTo(offset, y)
            //Down tangent line
            ctx.moveTo(0, y+30)
            ctx.lineTo(x/1.25, (2*y)-5)
            //Up tangent line
            ctx.moveTo(0, y-30)
            ctx.lineTo(x/1.25, 5)
            ctx.stroke()

        }
    }
}

But the issue is as soon I resize the window the canvas is distorted I am getting the below result:

I am not able to figure out what is going on when I resize the window. Any help would be appreciated

Thanks.

Answer 1

You are missing a call to beginPath() before you draw the arc. This is causing the arc to become part of the path that was started on the first onPaint in the subsequent calls to onPaint.

So, just add right above ctx.arc(...) :

ctx.beginPath()