Me preguntaba cuál sería la mejor manera de mover un círculo desde el punto A al punto B usando una animación suave.

Obtengo nuevas coordenadas con websocket cada segundo y me gustaría animar el movimiento del círculo desde el último punto al nuevo punto durante ese segundo.

He visualizado en este violín cómo se vería la configuración. Reemplacé el lado ws con la entrada de botón manual para este propósito de prueba, pero le falta la función para mover el círculo.

jQuery también es bienvenido.

var x = 100;
var y = 50;
var r = 10;

var WIDTH = 600;
var HEIGHT = 400;

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

function circle(x, y, r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI * 2, true);
  ctx.fill();
}

function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function draw() {
  clear(WIDTH, HEIGHT);
  ctx.fillStyle = "purple";
  circle(x, y, r);
}

draw();

https://jsfiddle.net/1g18rsqy/

Gracias :)