title: Drawing polar vectors with HTML5 canvas?
body: <p>Edit:  Solved.  Switched Math.asin() for Math.atan2().</p>
  
  <p>I'm trying to draw a polar vector (radius, angle) to a point on a canvas with JavaScript given the X,Y coordinates gotten by a mouse click.  This seems simple, but so far I haven't gotten it to work.</p>
  
  <p>What I've done: </p>
  
  <pre><code>window.onload=init();
  var canv, ctx, H, W;
  var A, th;
  
  function clickAction(e) {
      var pos=getMousePos(e);
      var x=pos.x;
      var y=pos.y;
      var A=Math.sqrt(x*x+y*y);
      var th=Math.asin(-y/A)*(180/Math.PI);
  
      drawVec(x,y);  //draws a line to (x,y) from center
      ctx.beginPath();
      ctx.arc(0,0,50,0,th); ctx.stroke();
  
      console.log(x,y, th);
  }
  
   function init() {
      canv=document.getElementById("canv");
      ctx=canv.getContext('2d');
      H=canv.height;  W=canv.width;
  
      ctx.translate(W/2, H/2);
      drawAxes();
  
      canv.addEventListener('mousedown', clickAction);    
  }
  </code></pre>
  
  <p>The arc should go from the x-axis (angle=0) to wherever you clicked, going counterclockwise (angle=theta).  But it's not. And drawAxes(), drawVec(), and getMousePos() are straight-forward and working so I didn't include them.</p>
  
  <p>Thanks. </p>