title: Calculating evenly spaced points on the perimeter of a circle
body: <p>The math behind this question has been asked numerous times, so that's not specifically what I'm after.  Rather, I'm trying to program the equation for determining these points into a loop in JavaScript, so that I can display points the evenly around the circle.  </p>
  
  <p>So with the equations for the X and Y positions of the points: </p>
  
  <pre><code>pointX = r * cos(theta) + centerX 
  pointY = r * sin(theta) + centerY
  </code></pre>
  
  <p>I should be able to calculate it with this:</p>
  
  <pre><code>var centerX = 300;
  var centerY = 175;
  var radius = 100;
  var numberOfPoints = 8;
  var theta = 360/numberOfPoints;
  
  for ( var i = 1; i &lt;= numberOfPoints; i++ ) {
  
      pointX = ( radius * Math.cos(theta * i) + centerX );
      pointY = ( radius * Math.sin(theta * i) + centerY );
      // Draw point ( pointX , pointY )
  }
  </code></pre>
  
  <p>And it should give me the x,y coordinates along the perimeter for 8 points, spread 45° from each other.  But this doesn't work, and I'm not understanding why.</p>
  
  <p>This is the output that I get (using the HTML5 Canvas element).  The points should reside on the innermost red circle, as that one has a </p>
  
  <p>Incorrect: <img src="https://i.stack.imgur.com/3tm63.png" alt=""></p>
  
  <p>When it "should" look like this (although this is with just 1 point, placed manually):</p>
  
  <p>Correct: <img src="https://i.stack.imgur.com/sUpz4.png" alt=""></p>
  
  <p>Could someone help me out?  It's been years since I took trig, but even with looking at other examples (from various languages), I don't see why this isn't working.</p>