Draw a star inside a circle with javascript and canvas.

Question

Hi. I want to draw a star with 5 branches inside a circle with canvas and javascript.
How could I know the coordinates of the different points of this polygon to position them in the canvas.
Any proposals would be welcome.

Answer 1

Being the noob I am, I'd probably use a graph paper, plot stuff on it, and calculate the relative coordinates.

http://print-graph-paper.com/virtual-graph-paper

That said, there's a good thread on this on SO.

https://stackoverflow.com/questions/25837158/how-to-draw-a-star-by-using-canvas-html5

Answer 2

You should check out the unit circle, if you know some trigonometry you'll do just fine.

Basically given an angle ß, you can get the coordinates of the point of the circle that makes that angle. That's where the unit circle cones.into play, a visualization helps a lot, either way, you'll find that the point coordinates are given by

x = cosß, y = sinß

This formula gives you the point's coordinates on a 1 unit radius circumstance, this means that if you want points in a bigger circumference you need to scale then, easy enough:

x = r * cosß, y = r * sinß

Where r is the radius.
Finally, these coordinates are around the origin (0, 0), to translate them somewhere else just add the desired coordinates to each x and y

Answer 3

Thanks for your suggestions. This help me.

Answer 4

I've finally done this code
https://code.sololearn.com/WGF5G9F0xVHs/?ref=app