title: How to draw bottom half of a circle in canvas
body: <p>I am trying to draw the the bottom half of the circle using the appropriate x=cos(theta), y=sin(theta) functions. If I iterate theta from Math.PI to 2*Math.PI I seem to be getting the upper half of the circle instead:</p>
  <p><img src="https://i.stack.imgur.com/p4Jpr.png" alt="enter image description here" /></p>
  <p>What am I doing wrong in this code snippet:</p>
  <pre><code>    window.onload = function() 
      {
          var canvas = document.getElementById('circle-canvas');
  
          if (canvas &amp;&amp; canvas.getContext) {
              var context = canvas.getContext('2d');
              if (context) {
                  context.strokeStyle = &quot;#369&quot;;
                  context.lineWidth = 4;
  
  
                  j = canvas.width / 2;
                  k = canvas.height / 2;
                  r = canvas.width / 4; 
  
                  function computeX(theta, r, j, k){ return r * Math.cos(theta) + j; }
                  function computeY(theta, r, j, k){ return r * Math.sin(theta) + k; }
  
                  start = Math.PI;
                  context.lineTo(computeX(start, r, j, k), computeY(start, r, j, k));
                  for(var theta = start; theta &lt;= (2*Math.PI); theta += .1) 
                  {
                      x = computeX(theta, r, j, k);
                      y = computeY(theta, r, j, k),
  
                      context.lineTo(x, y);
                  }
                  context.stroke();
                  context.closePath();
              }
          }
      }
  </code></pre>
  <p>EDIT:
  I am aware of the arc function. I need to implement the arc this way because this will be used as part of a bigger problem where I need to compute each individual point of the arc.</p>