javascript - Canvas - make element do a smooth turn given radius and angle -

i'm trying figure out how make element move js in canvas, here's have prepared: https://jsfiddle.net/ge1o2bt1/.

so example, want constructor function on "particle" have function called turn can pass angle, , radius , turn example if it's going x++; y+=0 after turning 90º should go x+=0; y++.

here's code moves object (inside constructor):

this.move = function(){     this.x+=1; }; 

then it's drawn on canvas based on x , y position. in advance, tried lot of things using math.cos , math.sin or using context.rotate save() , restore(). i'm not in math couldn't figure out how it.

edit: using tutorial refactor code , made this: https://jsfiddle.net/g2c9hf1p/. when click, object turns x degrees(i set 90) can't give radius because it's dependant on speed.

you use variable direction , array objects, whicht keeps increments coordinates.

var direction = 0; var directions = [{ x: 1, y: 0 }, { x: 0, y: 1 }, { x: -1, y: 0 }, { x: 0, y: -1 }]; 

to change coordinate, add direction.

this.move = function () {     this.x += directions[direction].x;     this.y += directions[direction].y; }; 

for changing direction, increment direction , limit length.

window.addeventlistener('click', function () {     direction++;     direction = direction % directions.length; }); 

function randomint(min, max) {      return math.floor(math.random() * (max - min + 1) + min);  }    var canvas = document.getelementbyid('canvas');  var ctx = canvas.getcontext('2d');    var width = window.innerwidth;  var height = window.innerheight;    canvas.width = width;  canvas.height = height;    var t = 0;    function clearcanvas() {      ctx.fillstyle = "#000";      ctx.fillrect(0, 0, width, height);  }    clearcanvas();    function circle(x, y, radius) {      ctx.beginpath();      ctx.arc(x, y, radius, 0, 2 * math.pi);      ctx.closepath();  }    var part = new particle(0, height / 2);    var rotation = 0;    var direction = 0;  var directions = [{ x: 1, y: 0 }, { x: 0, y: 1 }, { x: -1, y: 0 }, { x: 0, y: -1 }];    function loop() {      part.move();      part.draw();        requestanimationframe(loop);      t++;  }    function particle(x, y) {      this.x = x;      this.y = y;      this.color = 'hsl(' + t + ',100%,50%)';      this.radius = 1;        this.move = function () {          this.x += directions[direction].x;          this.y += directions[direction].y;      };        this.draw = function () {          this.color = 'hsl(' + t + ',100%,50%)';          ctx.fillstyle = this.color;          circle(this.x, this.y, this.radius);          ctx.fill();      };  }    loop();    window.addeventlistener('click', function () {      direction++;      direction = direction % directions.length;  });    window.addeventlistener('resize', function () {      width = window.innerwidth;      height = window.innerheight;        canvas.width = width;      canvas.height = height;        clearcanvas();  });

* { padding: 0; margin: 0; }  body {  overflow: hidden; }

<canvas id="canvas"></canvas>