Search code examples
jqueryhtmlcanvasmouseout

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.fillStyle = '#f00';
        context.beginPath();
        context.moveTo(98,265);
        context.lineTo(197,240);
        context.lineTo(197,235);
        context.lineTo(227,220);
        context.lineTo(242,220);
        context.lineTo(245,209);
        context.lineTo(252,208);
        context.lineTo(252,200);
        context.lineTo(274,179);
        context.lineTo(277,179);
        context.lineTo(290,166);
        context.lineTo(191,72);
        context.lineTo(164,97);
        context.lineTo(166,112);
        context.lineTo(94,129);
        context.lineTo(105,170);
        context.lineTo(72,177);
        context.closePath();
        context.fill();

            $('#flam').mouseout(function() {
               //What do I need to do here to clear this on mouseout

            ;})
        ;})

Or is there another more efficient way to do this


Solution

  • 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');
        // draw
        drawPolygon(context, coordStr);
    });
    
    $('.mapPart').mouseout(function () {
        // clear
        context.clearRect(0, 0, cv.width, cv.height);
    });
    
    function drawPolygon(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();
    }