Using Canvas for an arcTo

SeDi

Hi,
I am struggling to get an "arcTo" of a canvas' context2d to work.
I have tried to follow the docs but there is no arc showing up.

I have added a drawing below that shows what I'd like to achieve (the red arc) and what I use to construct it.

I have managed to get lines working in a canvas' onPaint: {…} and even had some success with arc(…), but as for arcTo, I am lost. I have not managed to get anything up at all. I have no idea what is blocking me here. Probably something stupid... Here's the code I use:

onPaint: {
            var ctx = getContext("2d")
            ctx.clearRect(0,0,width,height)
            ctx.lineWidth = 2
            ctx.strokeStyle = "red"
            ctx.beginPath()

            var r = Math.min(width, height)/2  //radius
            var alpha = 2*Math.PI * 15/360     // 15° in radians
            var ax = r * (1 - Math.sin(alpha))     // x of point A
            var ay = r * (1 + Math.cos(alpha))   // y of point A 
            var bx = r * (1 + Math.sin(alpha))    // x of point B
            var by = ay                                            // y of point B

            ctx.moveTo(ax, ay) // we don't want a "straight line" to the arc
            ctx.arcTo(ax, ay, bx, by, r)

            ctx.fillStyle = Qt.rgba(1, 1, 0,  0.5)
            ctx.fill()
            ctx.stroke();
        }

Any ideas?

SeDi

I haven't solved the arcTo problem (I actually tend to think that arcTo() might be broken or ill-documented), but i could solve my original problem (which is, how to create a speech balloon) with the arc() method:

onPaint: {
            var ctx = getContext("2d")
            ctx.clearRect(0,0,width,height)
            ctx.lineWidth = 2
            ctx.strokeStyle = "red"
            ctx.beginPath()
            ctx.scale(1, 0.7)
            var midX = width / 2
            var midY = height / 2

            ctx.moveTo(0,height)
            ctx.arc(midX, midY, Math.min(midX, midY)*0.7, Math.PI*3/4, Math.PI*14/32, false)
            ctx.closePath()

            ctx.scale(1, 1/0.7)
            ctx.fillStyle = Qt.rgba(1, 1, 0,  0.5)
            ctx.fill()
            ctx.stroke();
        }

J.Hilk

great that you managed to reach your goal,

however for future references, I would suggets this webside for canvas stuff
https://www.w3schools.com/tags/canvas_arcto.asp
It even has a web editor where you can see changes you make to the examples, very usefull.

SeDi

@J.Hilk That site is really cool! Thank you for that link.