 <p>You can "highlight" mapped portions of your img like this:</p> <ul> <li>Exactly overlay a canvas element of the same size using CSS</li> <li>Tell canvas not to respond to mouse/touch events: <code>pointer-events:none</code></li> <li><p>When a mapped area is clicked, tell canvas to draw that area in a low-opacity fill using path commands:</p> <pre><code>context.beginPath(); context.moveTo(381,90); context.lineTo(386,64); context.lineTo(421,32); context.lineTo(462,19); context.lineTo(501,32); context.lineTo(535,62); context.lineTo(540,83); context.closePath(); // fill the path area with a low-opacity red (or color of you choosing) context.globalAlpha=0.15; context.fillStyle='red'; context.fill(); // this fills the path context.globalAlpha=1.00; // just resetting to default opacity </code></pre></li> </ul> <p>That allows you to keep your existing code that uses img.</p> <p>Alternatively, if your design permits significant refactoring, you can draw the image on canvas and use <code>context.isPointInPath</code> to hit-test each path versus the mouse-click position. Then fill the hit path with the low-opacity fill.</p> <p><strong>[ Addition: Saving area coordinates for later use in hit-testing ]</strong></p> <p><em>Warning: untested code, might need tweaking</em></p> <p>For easy re-use of each areas coordinates, you can put each set of coordinates in an object and put those objects in an array: </p> <pre><code>var areas=[]; // first area coordinates arrays.push([ {x:381,y:90}, {x:386,y:64}, ... etc ]); // second area coordinates arrays.push([ {x:509,y:115}, {x:511,y:127}, ... etc ]); ... </code></pre> <p>Then use those saved area coordinates to do your hit-testing:</p> <pre><code>function isMouseInArea(mouseX,mouseY){ var index; // index of any "hit" area. leave it initially null for(var i=0;i&lt;areas.length;i++){ // create a path from this area's coordinates defineAreaPath(areas[i]); // test if the mouse is inside this area if(ctx.isPointInPath(mouseX,mouseY)){ index=i; } } // return any "hit" index of areas[] or return null if no hits return(index); } // utility function to define a path from the supplied coordinates function defineAreaPath(pts){ // create a path from this area's coordinates ctx.beginPath(); ctx.moveTo(pts[0].x,pts[0].y); for(var i=1;i&lt;pts.length;i++){ ctx.lineTo(pts[i].x,pts[i].y); } ctx.closePath(); } </code></pre> <p>And you can use the <code>isMouseInArea</code> function like this:</p> <pre><code>var index=isMouseInArea(mouseX,mouseY) if( index ){ // draw the area path that was "hit" by the mouse defineAreaPath(areas[index]); // fill that path with low-opacity fill ctx.globalAlpha=0.15; ctx.fillStyle='red'; ctx.fill(); ctx.globalAlpha=1.00; } </code></pre>