title: Creating dashes in a pattern of a circle using Javascript Math
body: <p>I don't understand a lot about the code below and I would like someone to break it down piece by piece.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    var centerX = 200,
      centerY = 200,
      radius = 100,
      width = 15,
      angles = []
  
    function draw() {
      var ctx = document.getElementById("canvas").getContext("2d");
      var angle;
      //why 180 
      for (var i = 0; i &lt; 180; i += 10) {
        //is the "angle" increasing on every iteration? can you demostrate this please
        angle = 2.1 + (i * Math.PI / 90);
        angles.push(angle)
        ctx.beginPath();
        ctx.moveTo(
          centerX + Math.sin(angle) * radius,
          centerY + Math.cos(angle) * radius
        );
        ctx.lineTo(
          centerX + Math.sin(angle) * (radius + width),
          centerY + Math.cos(angle) * (radius + width)
        );
        ctx.closePath();
        ctx.stroke();
      }
    }
    draw()
    console.log(angles)
    var str = "";
    angles.forEach(function(e, i) {
      str += " " + i + " : " + e + "|| Math.sin = " + Math.sin(e) + "|| Math.sin * radius = " + Math.sin(e) * radius
      $(".display").html(str)
    })
  
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt;
  &lt;div class="display"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>like for this part <code>angle = 2.1 + (i * Math.PI / 90);</code> I see <code>i</code> is incrementing by 10 and  the author is multiplying it by <code>Math.PI / 90</code> which is equal to 0.0348888888888889. I know Math.PI is 180 degrees, but were not doing 180/90. We're increasing the number 2.1 by small amount. I can't put all the pieces together.</p>
  
  <p>and in <code>for(var i = 0; i &lt; 180; i += 10){</code> why did the author choose 180. I know 180 degrees is a half a circle is that why they chose it?</p>
  
  <p>And I always see in other code people use <code>cos</code> for the x coord and <code>sin</code> for the y coord. It doesn't look like the author uses it like the way i just described. could you elaborate.</p>
  
  <p>Any help would be appreciated!</p>
  
  <p>EDIT: I'm also wondering when we use <code>for(var i = 0; i &lt; 180; i += 10){</code> we get the dashes in a full circle and when i do <code>i &lt; 90</code> we get a half a circle but the half circle is not straight like against an x or y axis its on an angle. why is it not on the axis? why is it on an angle?</p>