How to make x and y to move along the same line?

Question

I tried to create a Moving circle using PIXIJs that will move around the mouse event, its working, but the problem is either that it first reaches the first position or y,

the problem is that it reaches the position x or or y, which is closer to the circle, but I need to move the circle on the same line to the target side (mouse click area) ...

I did some calculations, but that doesn’t work ... any idea of ​​moving a circle in a straight line.

Here is my violin moving circle

**

let xDestination = 100;
let yDestination = 100;

let app = new PIXI.Application(window.width,window.height);
document.body.appendChild(app.view);

let Graphics = new PIXI.Graphics();
Graphics.beginFill(0x00FFFF);
let rect = Graphics.drawCircle(20, 20, 20, 20);
let NewStage = new PIXI.Graphics();


NewStage.beginFill(0xFC7F5F);
let bodyy = NewStage.drawRect(0, 0, 500, 500);
bodyy.interactive = true;
rect.interactive = true;

app.stage.addChild(bodyy);
app.stage.addChild(rect);

let isMovingForward = true;

app.ticker.add(function(){
	if(rect.pivot.x !== xDestination && rect.pivot.y !== yDestination){
	   if(rect.x > xDestination) {
		  rect.x -= 5;
	   } else {
		  rect.x += 5;
	   }
	   if(rect.y > yDestination) {
		  rect.y -= 5;
	   } else {
		  rect.y += 5;
	   }
	}
})
bodyy.click = function(mouseData){
	xDestination = Math.round(mouseData.data.global.x -20);
	yDestination =  Math.round(mouseData.data.global.y -20);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>

Run code

**

Here is my JSfiddle

Answer 1

, x y , . , , .

if :

rect.x -= (rect.x-xDestination)/10;
rect.y -= (rect.y-yDestination)/10;

.

Answer 2

, :

bodyy.click = function(mouseData){
       xDestination = Math.round(mouseData.data.global.x - 20);
       yDestination =  Math.round(mouseData.data.global.y - 20);
    }    

20 -