Hover на картинке [закрыт]

Изображения типа png имеют альфа канал, то есть они не обрезаны по контуру, они имеют такую же квадратную форму как и другие изображения, но там где нет изображения - есть 100% прозрачность(альфа-канал). А так же блок img имеет квадратную форму дефолтно подстраивающуюся под изображение.

Есть старые объекты, такие как area заключённые в тег map. Они имеют свободную кликабельную область, использовались для выделения например территорий городов на картах. Вы можете поверх изображения повесить area и уже на него повесить hover

Кому интересно. Чтобы найти изображение без прозрачного фона:
1. Отрисуем картинку на холсте, и пробежимся по пикселям. проверяя каждый на прозрачность (data[3] - alpha). Находим контур картинки.
2. Найденые координаты добавляем в '< area>'
3. Теперь на '< area>' можем вашать всякое

Большое спасибо Nikita Shahov за то что направил в правильном направлении)

this.canvas = document.getElementById('.canvas');
this.ctxCanvas = this.canvas.getContext('2d');    

let image = new Image();
let mapActivity = [];
this.image.src = this.imgUrl;
this.image.onload = () => {
      this.ctxCanvas.drawImage(this.image, 0, 0, width, height);
      for (let x = 0; x <= height; x++) {
        for (let y = 0; y <= width; y++) {
          if (this.ctxCanvas.getImageData(x, y, 1, 1).data[3]) {
            this.mapActivity.push(x, y);
            break;
          }
        }
      }
      for (let x = 0; height >= x; x++) {
        for (let y = width; y >= 0; y--) {
          if (this.ctxCanvas.getImageData(x, y, 1, 1).data[3]) {
            this.mapActivity.push(x, y);
            break;
          }
        }
      }
    };