I’ve got a circle that I’ve drawn on a canvas. I’d like to draw tab-like objects surrounding this circle using 2 arcs that are connected on each end with a line drawn at a certain angle. Unfortunately, since the lineTo() method only accepts x & y coordinates I have to be able to translate where I want to draw to in those terms.
I can draw the first arc, going from point 4 to 1, but I don’t know how to get the x and y coordinates of 1, nor how to figure out what the x and y coordinate of 2 would need to be. Once I’m at 2, I just need to increase the radius to draw the arc from 2 to 3 (or 3 to 2), but then I would need to know how to get the x, y coordinates of 4 so that I can call lineTo() and pass x and y of 4. I think this is probably some simple geometry or trigonometry involving Math.sin() and Math.cos() but I’m having a bit of a tough time figuring it out.
I’ve used something like the HTML5 Roulette Wheel.
This will give you those tabs you like, and you can play with the spacing between the tabs.
You won’t need lineTo, you can just use the fill and stroke of each ‘tab’ to create that effect.