Quiero hacer que la "animación" de mi Rect sea más fluida. Actualmente es realmente torpe. Sé el motivo. Una de las coordenadas se convierte en el valor deseado antes que la otra.

Por ejemplo, si actualmente estoy en (0,0) y necesito ir a (150,75) e incremento cada uno por igual por segundo, el cable y llegará mucho antes que el cable 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>