Аналог MapArea в JavaScript, ссылка на изображении

Добрый день, подскажите пожалуйста, как сделать активные области как ссылки на изображении, которое вызывается в js файле, и все это дело происходит в канвасе. Есть страница с анимашками при скролинге, в конце отображается финальное изображение "end.png". Вопрос, как назначить на нем области ссылок, типа как в html - mapArea с координатами? вот кусок кода где оно происходит в js

`var maxSize=3500;
$lauers=[];
$lauers.push(['clouds.png',[0,-0.03,2701],7.9,false]);
if(utils.isMobile()){
    $lauers.push(['end.png',[0,0,2700,false,true],0.7,[-900,1000],false]);
}
else{
    $lauers.push(['end.png',[0,0,2700,false,true],0.5,[-900,1400],false]);
    }
$lauers.push(['contact.png',[0,0.12,2600],1,false]);
$lauers.push(['blog.png',[-0.005,0,2150],1,false]);
$lauers.push(['portfolio.png',[0,0,1800],1,false]);
$lauers.push(['team.png',[0,0.1,1430],1,false]);
$lauers.push(['about.png',[0,0.04,917],1,false]);
$lauers.push(['home.png',[0,0,615],1,[460,470,true]]);
$('body').zoomTRV({speedScroll:0.5,widthY:maxSize,imagePath:'wp-
content/themes/trv3/images/compres/',images:$lauers}).init();`

я пробовал разбивать на подзадачи, в итоге я совместил mapArea с объектом img добавив ему атрибуты, правда без канваса, но не могу сделать тоже самое в коде выше

`var img=document.createElement("img");
     img.src="end.png";
     img.setAttribute('usemap', "#Map");
     document.body.appendChild(img);`

а вот кусок html

<div> 
  <script type='text/javascript' src='2.js'></script> 
<map name="Map" id="Map"> 
    <area alt="" title="" href="#" shape="rect" coords="266,417,566,488" /> 
    <area alt="" title="" href="#" shape="rect" coords="736,416,1036,489" /> 
     
</map>

может кто то натолкнет на мысль как это сделать