Clearing A Polygon On Mouseout

I have the following to draw a polygon on a canvas when the mouseover event fires: $(document).ready(function() { $('#flam').mouseover(function() { context.

Solution 1:

Ok so my answer changed completely :-).

What you need to do : - set a canvas on top of the image. --> use for both canvas and image : position:absolute; top:0px; left:0px; - in order to have IE working (thx to @Kerry Liu's comments), it seems you cannot ignore mouse events on the canvas in IE, so set another empty image on the canvas+image, and hook the area on this latest image. - add a class to all your area to be able to select them. I choose 'mapPart'. - Hook an event that will draw the polygon on canvas on mouse over for all mapParts. - Hook an event that will clear the canvas on mouse out for all mapParts.

http://jsfiddle.net/gamealchemist/cmKsD/

(using jQuery 1.9.1)

(Credits to this answer from @enhzflep from whom i stoled the polygon drawing :-) here : How to apply Hovering on html area tag? One might want to handle other area types as he does. )

html (extract) :

<div id='myImage'class="map">
    <img src="http://www.linkparis.com/images/francemap.jpg" border="0"  
         style='position:absolute; top:0px; left:0px;' />
    <canvas id='myCanvas' height='494' width='494' style='position:absolute; top:0px; left:0px;'>Canvas is not supported by your browser.</canvas>
    <img border="0" usemap="#imgmap" style='position:absolute; top:0px; left:0px; width:100%; height:100%; ' usemap="#imgmap" />
</div>
<map id="imgmap" name="imgmap">
    <area shape="poly" id="flam"class="mapPart" coords="98,265,197,240,197,235,227,220,242,220,245,209,252,208,252,200,274,179,277,179,
        290,166,191,72,164,97,166,112,94,129,105,170,72,177" />
    <area shape="poly" id="ancaster"class="mapPart" coords=" 198,240,97,265,103,274,232,334,254,263,251,261,251,243,243,245,240,235,
        229,240,229,240,222,240,216,244,213,237" />
....

Code :

var cv = document.getElementById('myCanvas');
var context = cv.getContext('2d');

context.clearRect(0, 0, cv.width, cv.height);

$('.mapPart').mouseover(function () {
    var coordStr = this.getAttribute('coords');
    // drawdrawPolygon(context, coordStr);
});

$('.mapPart').mouseout(function () {
    // clear
    context.clearRect(0, 0, cv.width, cv.height);
});

functiondrawPolygon(hdc, coOrdStr) {
    var mCoords = coOrdStr.split(',');
    var i, n;
    n = mCoords.length;

    hdc.beginPath();
    hdc.moveTo(mCoords[0], mCoords[1]);
    for (i = 2; i < n; i += 2) {
        hdc.lineTo(mCoords[i], mCoords[i + 1]);
    }
    hdc.lineTo(mCoords[0], mCoords[1]);
    hdc.stroke();
}