Click here to Skip to main content
15,918,976 members
Please Sign up or sign in to vote.
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())
Updated 22-Apr-24 23:45pm
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
    radius, // 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

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

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

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

1 solution

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.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900