javascripthtmlmathcanvasdegrees

Display different values at different angles in a circle using html5 canvas


Using HTML5 Canvas and Javascript I need to display different values (represented by a dot maybe) at different angles inside a circle.

Example data:
val 34% @ 0°,
val 54% @ 12°,
val 23% @ 70°,
and so on...

If I have a canvas 300 x 300px and the center of the circle is located at x: 150px and y: 150px with a radius of 150px, how would I calculate where to set my dot for the value 54% at 12 degrees?

My math is kinda terrible xD

I'd appreciate any kind of help and please ask questions if I do not make myself clear enough.

Thank you for listening and thank you in advance for you deep insights :D

EDIT (to explain in more detail):

Here is an image to illustrate what I am trying to accomplish: Illustration: values at different angles/degrees

I hope this makes my question a little more understandable.
(As you can see, not the same values as above)

Ty for your patience!


Solution

  • You may use this to convert from polar (radius, angle) coordinates to cartesian ones :

    // θ : angle in [0, 2π[
    function polarToCartesian(r, θ) {
        return {x: r*Math.cos(θ), y: r*Math.sin(θ)};
    }
    

    For example, if you want to draw at 12°, you may compute the point like this :

    var p = polarToCartesian(150, 12*2*Math.PI/360);
    p.x += 150; p.y += 150;
    

    EDIT : my polarToCartesian function takes radians as input, as many function in the Canvas API. If you're more used to degrees, you may need this :

     function degreesToRadians(a) {
         return Math.PI*a/180;
     }