How to use html <map> element to create <area> over canvas in jquery

I am working on image manipulation and getting coordinates of a polygon where user clicks / taps. I have coordinates.

I know how to use over an image. Here is detail example of this

My need is that, I want to draw a map element and area element over canvas.

<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>

Later when user click on particular polygon over canvas, I collect all the coordinates of that specific polygon and want to append area in the map element.

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

How could I achieve this? Or any other suggestions form you guys.

I need that particular area clickable and do some more work on that selected polygon. I have Lots of polygons on canvas (around 200 to 1000).

EDIT: A native JavaScript solution for creating responsive image-maps that rerender on image or viewport changes. Like This one

Any such lib which can populate/rerender map over canvas?