I have figured out what was wrong. The highlight layer ended up covering the area tag. I thought I had it set up so it wouldn't do this, but obviously I didn't. Note to anyone wanting to know. Layering of area tags is based on where in the html the image is not the code for the map.
I have some area tags and instead of registering an event listener to each one of them I would like to register to the parent element the map tag. Then I want to highlight the area using a canvas layer with onmouseout an onmouseover events.
Well, the highlight layer flickered, so I tested it and the onmousover and onmouseout were firing while I was over the layer whenever I moved the mouse. I think sometimes even when I wasn't moving. However, attaching the event directly to the area tags events works correctly.
I was wondering if their were any solutions to this problem. I assume the problem stems from the map tag not being a normal content tag, though I may be wrong and w3schools mentions that the map tag supports all the standard events http://www.w3schools.com/TAGS/tag_map.asp.
here is kind of what the code for the onmouseover event looks like.
document.getElmentById('mapTag').onmouseover=function(){
document.getElementById('highlight').style.display='block';
}