3

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

8
  • 1
    what do you mean by 'clear' : have the polygon drawn in black, or have the previous content restored ? Sep 28, 2013 at 21:58
  • when the use mouseovers the area it draws that polygon, when the mouse leaves it i want the polygon to no longer be there so yes have it restored to how it was before. also should I be using mouseenter/leave instead?
    – Jamie
    Sep 28, 2013 at 22:01
  • First tell us if a) you have a way to re-paint the whole canvas or b) you build the canvas step by step and have no way to re-paint it all. ?? Sep 28, 2013 at 22:05
  • Build step by step for multiple areas. I am just starting out with this.
    – Jamie
    Sep 28, 2013 at 22:06
  • I added a click event now as well because I need it to save the region that is clicked but when the mouse leaves it clears it how do i remove the mouseout function when it has been clicked? use jquery to remove the identifier?
    – Jamie
    Sep 29, 2013 at 0:31

1 Answer 1

6

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();
}
18
  • I would like to upvote but dont have the rep yet :D But I already have a canvas and the #flam id is from a area within a map already does this make a difference in how I would go about this? Such as is there a way I can grab the coordinates of the <area> tag and draw the polygon that way as well?
    – Jamie
    Sep 28, 2013 at 22:36
  • I never used area, but afaik it is meant for images, not canvases, right ? Sep 28, 2013 at 22:45
  • sorry I guess I should have mentioned that it is when a user hovers over an image of a map eg city lines of a state. that city needs to be highlighted by a polygon drawn on a canvas, and mouse out it clears. but i am guessing if it has the id of what is being used it should work the same possibly
    – Jamie
    Sep 28, 2013 at 22:50
  • so when does the canvas come in action ? is it located on top of the image ? This might raise some issue for detection, i don't know. While googling for area i found this answer that might quite be of help to you : stackoverflow.com/questions/12661124/… Sep 28, 2013 at 22:55
  • Now we should be pretty close to the answer. Sep 29, 2013 at 0:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.