title: HTML5 Canvas - Drawing a line inside a circle at specific angle
body: <p>Javascript</p>
  
  <pre><code>var canvas = document.getElementById("mycanvas");
  draw(canvas);
  
  function draw(canvas){
      var context = canvas.getContext('2d'), centerX = Math.floor(canvas.width / 2), centerY = Math.floor(canvas.height / 2),radius = Math.floor(canvas.width / 2);
      context.lineWidth = 1;
      context.strokeStyle = 'black';
      var begin = 0; interval = 90;
      var arcSize= degreesToRadians(interval);
      for(var startingAngle=begin; startingAngle &lt; 360;){
          context.beginPath();
          context.moveTo(centerX, centerY);
          context.arc(centerX, centerY, radius, degreesToRadians(startingAngle), startingAngle + arcSize, false);
          context.closePath();
          context.stroke();
          startingAngle = startingAngle + interval;
      }
      lineAtAngle(context,centerX,centerY,radius,30);
  }
  
  function degreesToRadians(degrees) {
      return (degrees * Math.PI)/180;
  }
  
  function lineAtAngle(context,x1, y1, length, angle) {
      context.beginPath();
      context.moveTo(x1, y1);
      context.lineTo(x1 + length * degreesToRadians(angle), y1 + length * degreesToRadians(angle));
      context.strokeStyle = 'red';
      context.closePath();
      context.stroke();
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;canvas id="mycanvas" width="400" height="400"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/Lbo0dzfL/1/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>What I am trying to achieve
  Pass the value of angle at which the red line needs to be drawn and it should be drawn at that angle.</p>
  
  <p><a href="https://i.stack.imgur.com/DrrvN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DrrvN.png" alt="enter image description here"></a></p>