是否可以检测鼠标是否在html5画布中的文本上？

Question

让我们假设我在画布中生成了许多随机定位的单词。我希望能够检测到哪个文本悬停在上面。这怎么在技术上完成？我的意思是我熟悉鼠标圆圈碰撞但不熟悉文字。

我假设我还必须使用毕达哥拉斯距离公式：

这是一个更完整的jsfiddle：https://jsfiddle.net/testopia/o7gL6ge9/1/

text = {
  x: 50,
  y: 100
}

function collision(m1, m2, textPos) {
  var x = m1 - text.x;
  var y = m2 - text.y;

  return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
}


if (collision(event.clientX, event.clientY, text) < 10) {
    console.log('Hello World');
}