Я хочу сделать «анимацию» моего Rect более плавной. В настоящее время это действительно неуклюже. Я знаю причину этого. Одна из координат становится искомым значением раньше другой.

Например, если я сейчас нахожусь на (0,0) и мне нужно перейти на (150,75), и я увеличиваю каждую равную каждую секунду, y-шнур придет намного раньше, чем x-шнур.

var canvas = document.getElementById('canvas');
var ctx = document.getElementById('canvas').getContext('2d');

var aniTimer;

var x;
var y;

var tx = tx || 0;
var ty = ty || 0;

var xDir;
var yDir;

function followMouse(e) {
  x = e.offsetX;
  y = e.offsetY;
  cancelAnimationFrame(aniTimer);
  moveObject();
}

function moveObject() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  if (x < tx) {
    xDir = -1;
  } else {
    xDir = 1;
  }
  if (y < ty) {
    yDir = -1;
  } else {
    yDir = 1;
  }
  tx = tx != x ? tx + xDir : tx;
  ty = ty != y ? ty + yDir : ty;
  
  
  ctx.fillRect(tx - 25 , ty + 25, 50, 10);
  if ( tx != x || ty != y ) {
    aniTimer = window.requestAnimationFrame(moveObject);
  }
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

canvas.addEventListener('mousemove', _.throttle(function(e) {
  followMouse(e);
}, 100));

window.addEventListener('resize', resizeCanvas, false);

resizeCanvas();

html,
body {
  margin: 0;
  height: 100%;
}

canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<canvas id="canvas"></canvas>