title: Move canvas image across circular path
body: <p>I am currently working on a 2D javascript game and I am doing the movement mechanics right now. I want players to be able to move forward and backward, towards or away from the mouse, while also having the ability to strafe.</p>
  
  <p>I got the mouse following down pretty well but I am stuck on how to implement the strafing. I need my player to move along a dynamic circular path that changes sizes depending on how far away the player is from the mouse.</p>
  
  <p>ex: If the mouse was the red X, I want to move the player along the green circular path.
  This path of course will be changing size based on how far away the player is from the mouse.</p>
  
  <p><a href="https://i.stack.imgur.com/dXpA0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dXpA0.png" alt=""></a></p>
  
  <p>I am updating the players position by moving whenever the movement keys are pressed so I am really looking for an equation to move the player in the correct circular path that can be implemented in a "position updated every second" sort of way.</p>
  
  <p>I know that for a circular path, the coordinates can be found by:</p>
  
  <p><code>
  x = centerX * radius * Math.cos(theta);
  y = centerY * radius * Math.sin(theta);
  </code></p>
  
  <p>But I am having trouble implementing. Here is some of my framework, but I am afraid all the solutions I have tried haven't even gotten me close so I will not post the broken math I have already deleted</p>
  
  <pre><code>  Player.prototype.update = function(delta){
  
         this.playerCenter = [this.x+this.width/2, this.y+this.height/2];
  
         let dX = (GAME.mouse.position.x - this.playerCenter[0]),
             dY = (GAME.mouse.position.y - this.playerCenter[1]);
             radius = Math.sqrt(dX * dX + dY * dY);
  
  
         // Movement Forward
         if(GAME.keyDown[87] &amp;&amp; radius &gt;= 50){
           this.x += (dX / radius) * this.movementSpeed * delta;
           this.y += (dY / radius) * this.movementSpeed * delta;
         }
  
         // Movement Backward
         if(GAME.keyDown[83]){
           this.x -= (dX / radius) * this.movementSpeed * delta;
           this.y -= (dY / radius) * this.movementSpeed * delta;
         }
  
         // Strafe left
         if(GAME.keyDown[65]){
  
  
         }
  
         // Strafe right
         if(GAME.keyDown[68]){
  
         }
  
       }
  </code></pre>