HTML Leinwand Bild Karte füllen außerhalb des Bereichs

Question

Ich habe eine Bildkarte und eine Leinwand, ich habe es im Moment so die Poly-Bereich füllt sich mit der Farbe, aber ich will es so alles außerhalb der Poly füllt, so dass es erscheint, dass es leuchtet.

Es wird mehr als einen Bereich auf dem Bild geben, ich habe aber gerade einen hinzugefügt.

Die andere Sache ist, dass auf Mouseout derzeit die Füllung verschwindet (was korrekt ist), aber es tut so sofort, ich möchte eine Fade, so dass es auf mouseover und mouseout ein- und ausblendet.

Hier ist meine html Leinwand/img Karte:

<canvas id="imgCanvas"></canvas> 
<center> 
    <img src="/images/homepage.jpg" id="map-image" style="width: 100%; max-width: 100%; height: auto;" alt="" usemap="#homepage-image" /> 
    <map name="homepage-image"> 
     <area class="homepage-hover" onmouseover="myHover(this);" onmouseout="myLeave();" href="/about" shape="poly" coords="465, 766, 477, 710, 473, 605, 480, 490, 492, 455, 526, 432, 551, 430, 567, 379, 562, 334, 528, 237, 526, 208, 534, 178, 557, 142, 576, 122, 616, 108, 669, 94, 708, 106, 755, 124, 784, 146, 810, 200, 819, 247, 828, 300, 830, 352, 837, 409, 834, 443, 836, 457, 852, 467, 878, 486, 894, 520, 898, 564, 891, 612, 891, 663, 893, 706, 891, 766" /> 
    </map> 
</center> 

Hier werden die js ist, die den Bereich auf die Leinwand zieht:

window.onload = myInit(); 
var hdc; 
function byId(e){return document.getElementById(e);} 

function drawPoly(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.fill(); 
} 

function myHover(element) 
{ 
    var hoveredElement = element; 
    var coordStr = element.getAttribute('coords'); 
    var areaType = element.getAttribute('shape'); 

    switch (areaType) 
    { 
     case 'polygon': 
     case 'poly': 
      drawPoly(coordStr); 
      break; 

     case 'rect': 
      drawRect(coordStr); 
    } 
} 

function myLeave() 
{ 
    var canvas = byId('imgCanvas'); 
    hdc.clearRect(0, 0, canvas.width, canvas.height); 
} 

function myInit() 
{ 
    var img = byId('map-image'); 

    var x,y, w,h; 

    // get it's position and width+height 
    x = img.offsetLeft; 
    y = img.offsetTop; 
    w = img.clientWidth; 
    h = img.clientHeight; 

    var imgParent = img.parentNode; 
    var can = byId('imgCanvas'); 
    imgParent.appendChild(can); 

    can.style.zIndex = 1; 

    can.style.left = x+'px'; 
    can.style.top = y+'px'; 

    can.setAttribute('width', w+'px'); 
    can.setAttribute('height', h+'px'); 

    hdc = can.getContext('2d'); 

    hdc.fillStyle = 'rgba(0, 0, 0, 0.75)'; 
    hdc.strokeStyle = 'rgba(0, 0, 0, 0.75)'; 
} 

Answer 1

So, nachdem es Tonnen von verschiedenen Möglichkeiten, stellt sich heraus versuchen, mit Leinwand 'war nicht der richtige Weg. Im Grunde habe ich das durch Bilderwechsel gelöst. Ich hatte dies ursprünglich versucht, aber mit jquerys fadeIn/fadeOut und dann ändern Sie die img src verursachen einen Sprung und hatte nicht die glatteste Dafe-Effekt.

Ich habe jetzt Bilder, die ich Opazität in Photoshop in den Bereich, den ich wollte, und dann alle auf Deckkraft 0, mit Ausnahme der ursprünglichen img, dann wenn ich schweben über den kartierten Bereich habe ich verwendet fadeIn, um die Deckkraft zu ändern 1. Das macht den Übergang schön glatt und bringt den gewünschten Effekt - auch weil der Mapping-Bereich für jeden img gleich ist. Ich brauche nur die einzelne Map.

Wenn es eine Möglichkeit gibt, es über Canvas zu tun, obwohl ich interessiert wäre, insbesondere, wie ich den Bereich umkehren kann, der so innerhalb des Bereichs schwebt, und um ihn verblasst (mit Opazität). Ich habe mir unzählige Kartenbeispiele angesehen, von denen keines das tut, wonach ich frage.