title: JavaScript - rotate a shape by a fixed angle
body: <p>I want to move a shape around the circumference of a circle on HTML canvas. I am using the following JavaScript logic:</p>
  
  <pre><code>speed = 0.005;
  angle = Math.PI/2;
  angle +=  speed * direction;
  var x = cx + (radius * Math.cos(angle));
  var y = cy + (radius * Math.sin(angle));
  </code></pre>
  
  <p><code>direction</code> is set by a key press (left arrow = -1, right arrow = +1). <code>cx</code> and <code>cy</code> are fixed - they are the x and y co-ordinates of the center of the circle around which the shape is moving.</p>
  
  <p>I want to move the shape around the circle in fixed steps, like the seconds hand of a clock. However, there should be 187 steps. I know that dividing 360/187 = 1.9251 degrees = 0.03359 radians. However, my drawing function is inside a loop, so writing <code>angle += 0.03359</code> makes the shape spin around the circle forever. </p>
  
  <p>How can I make each key press move the shape either clockwise or anti-clockwise around the circle, but in steps of 0.3359 radians?</p>
  
  <p>I am using the logic I found in the answer written by <a href="https://stackoverflow.com/users/1242389/rafaelcastrocouto?tab=profile">rafaelcastrocouto</a> for this question: <a href="https://stackoverflow.com/questions/26862954/how-to-move-object-in-circle-forward-and-backward-in-html5-canvas">how to move object in circle forward and backward in html5 canvas?</a></p>