javascript - Move canvas image across circular path -

i working on 2d javascript game , doing movement mechanics right now. want players able move forward , backward, towards or away mouse, while having ability strafe.

i got mouse following down pretty stuck on how implement strafing. need player move along dynamic circular path changes sizes depending on how far away player mouse.

ex: if mouse red x, want move player along green circular path. path of course changing size based on how far away player mouse.

i updating players position moving whenever movement keys pressed looking equation move player in correct circular path can implemented in "position updated every second" sort of way.

i know circular path, coordinates can found by:

x = centerx * radius * math.cos(theta); y = centery * radius * math.sin(theta);

but having trouble implementing. here of framework, afraid solutions have tried haven't gotten me close not post broken math have deleted

  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] && radius >= 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]){         }       } 

you have solution.

you need go @ 90 deg forward vector. rotate vector 90cw swap x,and y , negate new x.

eg

dx = ?;  // forward direction dy = ?;   // rotate 90 clockwise dx1 = -dy; dy1 = dx; 

thus can update code follows

   var dx = (game.mouse.position.x - this.playercenter[0]);    var dy = (game.mouse.position.y - this.playercenter[1]);    var  radius = math.sqrt(dx * dx + dy * dy);    //normalise           if(radius > 0){        dx = (dx / radius) * this.movementspeed * delta;        dy = (dy / radius) * this.movementspeed * delta;;    }else{        dx = dy = 0;  // close need set or nan propagating through position variables.    }       if(game.keydown[87] && radius >= 50){ // movement forward      this.x += dx;      this.y += dy;    }    if(game.keydown[83]){ // movement backward      this.x -= dx;      this.y -= dy;    }    if(game.keydown[65]){ // strafe left       this.x += -dy;     // swap x , y negate new x rotate vector 90       this.y += dx;     }           if(game.keydown[68]){ // strafe right       this.x -= -dy;     // swap x , y negate new x rotate vector 90       this.y -= dx;     }