How to generate this canvas in JS according my example picture?

Question

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 22-Apr-24 23:44pm

Member 16073923

Updated 22-Apr-24 23:45pm

v2

Add a Solution

Comments

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

[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[^]

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

M-Badger · Answer 1 · 2024-04-23T03:35:00

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.