15,918,976 members
1.00/5 (1 vote)
See more:
Hello Guys...

I am struggling to make this done.
Lines are easy, but I can not figure out the mathematic points for connection of line and arc...

if anyone can help in any way, it would be highly appriciate.

here[^] is a link to my picture

Thank you

What I have tried:

just the lines around.
can not figure out how to calculate start/end x and angle of the arc()
and same for the line on which X to end (to connect to arc())
Posted
Updated 22-Apr-24 23:45pm
v2
0x01AA 23-Apr-24 7:51am
Without guarantee and not verified, but the idea should be ok:
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)
Member 16073923 23-Apr-24 9:33am
thank you for the input,
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:
```ctx.arc(centerX, // this is clear
centerY, // this is clear
startAngle, // this is I dont know how to put the calculation to fit (however I played around and shall be around -0,6
endAngle, // this is I dont know how to put the calculation to fit (however I played around and shall be around 3,7
true); // i want counterclockwise```

Thank you
0x01AA 23-Apr-24 9:55am
I expected this will come ;)

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

(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[^]
0x01AA 23-Apr-24 13:25pm
Most probably you have reasons why you use JS Canvas.

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 ;)

## Solution 1

Let's assume that the arc is part of a circle.
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`.