Let's assume that the centre of the circle is the point '

`+`

' on your diagram and hence the radius of the circle is `0.5 * b`

- call this point `X`

.Call the intersection of the arc and the line on the left side point

`M`

.Call the intersection of the arc and the line on the right side point

`O`

.You can then draw a right angled triangle with the

`hypotenuse`

from `X`

to `M`

. The hypotenuse has length `0.5 * b`

.You can calculate the length of the

`opposite`

side, it's the height of the rectangle (`a`

) minus half the height of the overall object (`0.5 * b`

), or `a - (0.5 * b)`

.You can replace

`b`

with `(4 * a) / 3`

.That gives

`opposite = a - (0.5 * ((4 * a) / 3))`

.You also know that

`sin H = opposite / hypotenuse`

, where `H`

is the angle between the `hypotenuse`

and the `adjacent`

.You can now calculate the length of the

`adjacent`

by rearranging the calculation `cos H = adjacent / hypotenuse`

because you know the angle `H`

and the length of the `hypotenuse`

.The length of the line from the origin to point M is therefore

`(c / 2) - adjacent`

.The length of the line from the origin to point O is therefore

`(c / 2) + adjacent`

.
You know the vertical distance from the center of the circle where it crosses the top line: b/4

You know the raduis of the circle: b/2

With this you have the horizontal distance where the circle crosses the top line.

Pyhtagoras: r^2 - (b/4)^2= (b/2)^2- (b/4=^2= b^2/4 - b^2/16= 4b^2/16-b^2/16= 3b^2/16

Horizontal distance of the crossing point from center= Sqrt(3b^2/16)

actually, logic seems perfect...

unfortunately, I am very lost in how should i use 3rd and 4th parameter of arc().

in there I use Math.PI, however how do I calculate the amount to by multiplied by PI in order to make this done?

I have played around and I know real (at least roughly, its not totaly EXACT) values which shall end up:

can I very kindly ask for an example of this please?

Thank you

start angle: Math.asin(opposite/hypotenuse)

end angle: pi - start angle

where in the formula above:

opposite is b/4

and hypotenuse is the radius of the circle, therefore b/2

[Edit]

(b/4)/(b/2)= 2/4= 0.5

Start: asin(0.5) = 0.5236

End: pi - 0.5236= 2.618

[Edit1]

Taking into acount the inversed y axis it should than be more:

ctx.arc(100, 75, 50, -0.5236, 0.5236-Math.PI, true);

See here for more background:

Trigonometry - Wikipedia[^]

Only as a hint: Using SVG can make your life more easy. With SVG you can define a so called 'viewBox'. This frees you from the constant conversion and rethinking of a Cartesian coordinate (with origin in left bottom) system to screen coordinates (with origin left top). Also for scaling you don't have to bother, once the 'viewBox' is defined.

I hope you can understand my cryptic English ;)