Edit in JSFiddle

// Primero creo un canvas en base a la posición relativa de un elemento dado: #canvas
var paper = Raphael(document.getElementById("canvas"), 400, 300);

// Le pongo un fondo que hará de fondo, de borde y de "detector" del evento click
var border = paper.rect(0, 0, 400, 300);
border.attr('fill', '#EEE');
border.attr('stroke', '#222');

// Luego creo una bola para interactuar con ella
var circle = paper.circle(50, 40, 10);
circle.attr("fill", "#ff0");
circle.attr("stroke", "#222");

var stack = [];
var animating = false;

// Y por fin agrego un evento para que cuando se haga click dentro del canvas, la bola se mueva.
border.click(function (e) {
  // Para calcular la posicion x e y relativa al canvas, utilizo offsetX y offsetY
  var anim = Raphael.animation({
    cx: e.offsetX,
    cy: e.offsetY
  }, 1000, "<>", function () {
    var a = stack.shift();
    if (a) {
      circle.animate(a);
    } else {
      animating = false;
    }
  });

  if (animating == true) {
    stack.push(anim);
  } else {
    animating = true;
    circle.animate(anim);
  }
});

// Me encanta Raphaeljs

<br/>
<div style="text-align: center;">
  <p><i>Haz click en el cuadro para dirigir la bola hacia allí</i>
  </p>
  <p><i>Observa que si haces múltiples clicks, se van agregando a una cola que luego se va despachando</i>
  </p>
</div>
<div id="canvas" style="width: 400px; margin: 1em auto;"></div>