javascriptcanvashtml5-canvaslimitcoords

How to find coords from angle in a circle


I'm trying to find the coords of the red point in the image, I have the mouse coords, the initial point and the radio but I don't know how to find the coords of the red point.

enter image description here

I am using JavaScript and canvas.


Solution

  • To find the angle:

    var diffX = mouseX - centerX;
    var diffY = mouseY - centerY;
    var angle = Math.atan2(diffY, diffX);
    

    To find the new point use that angle with radius:

    var x = cx + radius * Math.cos(angle);
    var y = cy + radius * Math.sin(angle);
    

    Live demo