// See my tech blog at http://tech.scargill.net 
// Very simple example of getting mouse information from an HTML5 canvas for gauges etc.
// values returned include degrees, x and y and finally distance from centre of the canvas

// Get a "handle" on the canvas to work with
theCanvas = document.getElementById("myCanvas");
// define the centre point of the canvas
cX = Math.floor(theCanvas.width / 2);
cY = Math.floor(theCanvas.height / 2);
// Get a "context"
ctx= theCanvas.getContext("2d");

// set up the font
ctx.font = "12px Helvetica";
ctx.textAlign = 'center';
ctx.fillStyle = '#8A8A8A';

// the rest are functions - the "event listener" traps the mouse and displays results

// Get the position of the mouse relative to the canvas
function getMousePos(canvasDom, mouseEvent) {
  var rect = canvasDom.getBoundingClientRect();
  return {
    x: mouseEvent.clientX - rect.left,
    y: mouseEvent.clientY - rect.top
  };
}

// Here we get mouse coordinates and translate to a value
// Good old basic algebra from school
// Apparently the convention is  to start at 0 degrees on the right and go backwards
// - someone should have told that to clock-makers
theCanvas.addEventListener("mousemove", function(e) {
  var m = getMousePos(theCanvas, e);
  if (m.x < cX) {
    if (m.y < cY) pos = 180 + Math.floor(Math.atan((m.y - cY) / (cX - m.x)) * (180 / Math.PI));
    else pos = 180 + -Math.floor(Math.atan((m.y - cY) / (m.x - cX)) * (180 / Math.PI));
  } else {
    if (m.y < cY) pos = - Math.floor(Math.atan((cY - m.y) / (cX - m.x)) * (180 / Math.PI)) ;
    else pos = 360 + Math.floor(Math.atan((cY - m.y) / (m.x - cX)) * (180 / Math.PI));
  }

  // and for good measure get the distance from the centre
  // You may, for example, only be interested in an arc area around the edge of the canvas
  tX = Math.abs(cX - m.x);
  tY = Math.abs(cY - m.y);
  tD = Math.floor(Math.sqrt(tX * tX + tY * tY));


  // print the result
  ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
  ctx.moveTo(cX, cY);
  ctx.fillStyle = "#ff0044";
  ctx.arc(cX, cY, 5, 0, 360, false);
 // ctx.closePath();
  ctx.fill();
  
    // some colour just for the sake of it
  var gradient = ctx.createLinearGradient(0, 0, 150, 100);
  gradient.addColorStop(0, "rgb(255, 0, 128)");
  gradient.addColorStop(1, "rgb(105, 103, 255)");
  ctx.fillStyle = gradient;

  ctx.fillText("Mouse= " + pos + " degrees. (" + m.x + "x," + m.y + "y)" + " Dist; " + tD + "px", cX, 30);
}, false);