Как нарисовать на canvas только часть картинки

есть 2 картинки и canvas, первая картинка рисуется полностью на весь canvas.
А вторую нужно показывать по частям, при чём не кругами или квадратами, а полигонами. Грубо говоря нужно сделать подсветку части картинки при наведении на неё, и обратное. (данная задача уже выполнена в плагине mapster для jquery, но мне нужно сделать без jquery, а библиотека без него не работает)

функция для определения в попадания точки в полигон есть

function isPointInPoly(poly, pt){
    for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
        ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
        && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
        && (c = !c);
    return c;
}

и вот так я получаю полигоны на которые нужно реагировать:

var tmp2 = [],tmp,i,n,areas = document.getElementsByTagName('area'), len = areas.length, coords = [];
//в массиве areas все элементы по тегу area, len - его длина, coords - массив результата.
//идём по массиву areas и в массив tmp2 забиваем координаты, после этого забиваем 
//этот набор координат, как единое целое в массив результат coords - т.е. там 
//в итоге массив полигонов представленный точками
for (n = 0; n < len; n++) {
    tmp = areas[n].coords.split(',');
    for (i=0;i<tmp.length-1;i+=2)tmp2.push({x: tmp[i], y: tmp[i+1]});
    coords.push(tmp2);
    tmp2=[];
}
areas =[];

(результат в массиве - coords)

мапа в коде из которой получаем координаты

<map name="map1">
<area shape="poly" coords="16,107,68,107,68,159,16,159" alt="один" href="">
...
</map>