Как использовать элемент HTML <map>для создания <area>поверх холста в JQuery

Question

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

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

Мне нужно, чтобы я нарисовал элемент карты и элемент области поверх холста.

<map name="map-canvas" id="mapid">
                <!-- <area shape="poly" coords="130,147,200,107,254,219,130,228"
                      href="https://developer.mozilla.org/docs/Web/HTML"
                      target="_blank" alt="HTML" />
                <area shape="poly" coords="130,147,130,228,6,219,59,107"
                      href="https://developer.mozilla.org/docs/Web/CSS"
                      target="_blank" alt="CSS" />
                <area shape="poly" coords="130,147,200,107,130,4,59,107"
                      href="https://developer.mozilla.org/docs/Web/JavaScript"
                      target="_blank" alt="JavaScript" /> -->
            </map>
    <div style="border:1px solid red;">
        <canvas usemap="#map-canvas" id="canvas" class="map" style="border:1px solid darkgray;"></canvas>
    </div>

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

$("#mapid").append('<area shape="poly" coords="' + areaPolygonCordinates + '"  href="#" alt="myPolygon" />')

Как мне этого добиться? Или любые другие предложения от вас, ребята.

Мне нужно, чтобы эта конкретная область была кликабельной и еще немного поработала с этим выбранным полигоном. У меня много полигонов на холсте (от 200 до 1000).

РЕДАКТИРОВАТЬ: нативное решение JavaScript для создания адаптивных карт изображений, которые воспроизводятся при изменении изображения или области просмотра. Like This

Есть ли такая библиотека, которая может заполнять / перерисовывать карту поверх canvas?