javascript - Detect mouse is near circle edge -

i have function gets mouse position in world space, checks see if mouse on or near circle's line.

the added complication how ever circle transformed @ angle it's more of ellipse. can't see code detect mouse near border of circle , unsure going wrong.

this code:

function check(evt){     var x = (evt.offsetx - element.width/2)  + camera.x; // world space     var y = (evt.offsety - element.height/2) + camera.y; // world space      var threshold = 20/scale; //margin edge of circle      for(var = 0; < obj.length;i++){        // var mainangle related transform        var x1 = math.pow((x - obj[i].originx), 2) / math.pow((obj[i].radius + threshold) * 1,2);        var y1 = math.pow((y - obj[i].originy),2) / math.pow((obj[i].radius + threshold) * mainangle,2);        var x0 = math.pow((x - obj[i].originx),2) / math.pow((obj[i].radius - threshold) * 1, 2);        var y0 = math.pow((y - obj[i].originy),2) / math.pow((obj[i].radius - threshold) * mainangle, 2);                         if(x1 + y1 <= 1 && x0 + y0 >= 1){             output.innerhtml += '<br/>over';             return false;         }     }     output.innerhtml += '<br/>out'; } 

to understand better, have fiddle here: http://jsfiddle.net/nczbmbxm/ can move mouse on circle, should "over" when within threshold of being near circle's perimeter. not seem work. , can't work out maths needs check this.

there typo on line 34 orignx

   var x1 = math.pow((x - obj[i].orignx), 2) / math.pow((obj[i].radius + threshold) * 1,2); 

should

   var x1 = math.pow((x - obj[i].originx), 2) / math.pow((obj[i].radius + threshold) * 1,2); 

now you're go!

edit: in regards scaling of image , further rotation of circle, set variables rotation x-axis , y-axis, such as

var xangle; var yangle; 

then ellipse can written in form

x^2 / a^2 + y^2 / b^2 = 1 

such in euclidean geometry,

then semi-major , semi-minor axes determined rotation angles. if radius circles actual radius.

var semimajor = radius * cos( xangle ); var semiminor = radius; 

or

var semimajor = radius; var semiminor = radius * cos( yangle ); 

you still need more transformations if wanted x , y angle.

so if (xmousec, ymousec) mouse coordinates relative circles centre, must check if point satisfies equation of ellipse within tolerance, i.e. plug in

a = semimajor; b = semiminor; x = xmousec; y = ymousec; 

and see if sufficiently close 1.

hope helps!