Как отобразить текст при наведении курсора при использовании canvas и скрыть при наведении мыши

Question

У меня есть элемент canvas, который является элементом canvas, состоящим из множества изображений.Я хочу добавить ярлык к каждому изображению на холсте, но хочу, чтобы он отображался только тогда, когда пользователь наводит курсор на правильное изображение.

Мне удалось отобразить некоторый текст, но я не могу понять, кактолько чтобы показать его при наведении курсора мыши и не показывать при отпускании мыши.В настоящее время я проверяю, совпадает ли позиция мыши с позицией мыши в массиве точек.Если это так, он добавляет текст.

    canvas.addEventListener('mousemove', handleMouseMove.bind(this));


var handleMouseMove = function (e) {
    var mousePos = getSquare(canvas, e);
    var pos = points.filter((item => mousePos.x === item.x && mousePos.y === item.y));
    var hit = false;
    if (pos && pos.length) {
      context.fillStyle = "#ffffff";
      console.log(pos);
      context.fillText('Hello', pos[0].x, pos[0].y);
    } else {
      context.fillStyle = "#ffffff00";
      return;
    }
  };

  var getSquare = function (canvas, evt) {
    context.globalCompositeOperation = 'source-atop';
    var rect = canvas.getBoundingClientRect();
    return {
      x: 1 + (evt.clientX - rect.left) - (evt.clientX - rect.left) % 20,
      y: 1 + (evt.clientY - rect.top) - (evt.clientY - rect.top) % 20
    };
  };

По сути, я хочу, чтобы «Привет» отображался, но только когда вы наводите курсор на правильную позицию.

Answer 1

Простой способ сделать это - вывести мышь x и y из события и сравнить ее с x, y, шириной и высотой изображения.

Просмотрите этот фрагмент:

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

cxt.font = "50px georgia";

function clear() { // Clears screen to prevent smearing
  cxt.fillStyle = "white";
  cxt.fillRect(0, 0, 500, 250);
}

function drawrect() { // Draws rectangle
  cxt.fillStyle = "gray";
  cxt.fillRect(50, 50, 200, 100);
}

clear();
drawrect();

canvas.addEventListener("mousemove", (event) => { // When mouse is moved on canvas
  var x = event.offsetX;
  var y = event.offsetY;
  clear();
  drawrect();
  if (x > 50 && x < 250 &&
      y > 50 && y < 150) { // If mouse x and y are inside rectangle
      cxt.fillStyle = "red";
      cxt.fillText("Hello", x, y); // Draw text
  }
});

canvas {
  border: 1vw solid black;
}

<canvas id="canvas" width="500" height="250"></canvas>