<canvas id="canvas" width="200" height="200"></canvas>
(function(){
  var ctx;
  var canvas = document.getElementById('canvas');
  var cy = canvas.height / 2;
  var cx = canvas.width / 2;
  var radius = cy - 20;
  var fontSize = 14;

  function init() {
    if ( !(ctx = canvas.getContext('2d')) ) return false;

    ctx.font = fontSize + 'px Atial';
    drawBaseGraphic();
    drawCircumferentialPoint(0);
  }
  function drawBaseGraphic() {
    ctx.strokeStyle = '#000000';

    ctx.beginPath();
    ctx.arc(cx, cy, radius, 0, Math.PI*2, true);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(0, cy);
    ctx.lineTo(canvas.width, cy);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(cx, 0);
    ctx.lineTo(cx, canvas.height);
    ctx.stroke();
  }
  function drawCircumferentialPoint(angle) {
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);
    var cpX = cx + cos * radius;
    var cpY = cy + sin * radius;

    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(cpX, cpY);
    ctx.strokeStyle = '#10FF10';
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(cpX, cpY, 3, 0, Math.PI*2, true);
    ctx.fillStyle = '#FF00FF';
    ctx.fill();

    var textX = cpX;
    var textY = cpY;
    if(cos*100 < 0){
      ctx.textAlign = 'left';
      textX += 10;
    } else {
      ctx.textAlign = 'right';
      textX -= 10;
    }
    if(sin*100 < 0){
      textY += fontSize;
    }
    ctx.strokeStyle = '#000000';
    ctx.strokeText(cos.toFixed(2)+','+sin.toFixed(2), textX, textY);
  }
  function windowToCanvas(canvas, x, y) {
    var bbox = canvas.getBoundingClientRect();
    return {  x: (x - bbox.left) * (canvas.width  / bbox.width ),
              y: (y - bbox.top)  * (canvas.height / bbox.height) };
  }
  canvas.onmousemove = function (e) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBaseGraphic();

    var loc = windowToCanvas(canvas, e.clientX, e.clientY);
    var angle = Math.atan2(loc.y - cy, loc.x - cx);
    drawCircumferentialPoint(angle);
  };
  init();
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.