DOM or CANVAS for a HeatMap on a BattleMap? Learning HTML5 Game Programming Question

Hi there James, I think that the question is better explained with examples:

Imagine that we have a 2D BattleMap like this:

Then we need to create an HeatMap overlay on top of it like this:

What would be the best aproach considering that the map could be 50* 50 tiles?

In this case I have created the battle map using simple HTML tables. I have tested using Raphael , a Javascript Library that use SVG for graphics, but it was slow, specially if I want to apply some dinamic transparency on the overlay.
Im currently using another HTML table and DOM manipulation with jquery to create the HeatMap. All the data is precalculated from the server, so the color for a position is stored in a javascript array. Would you think that Canvas would draw faster that pure DOM generation? Also how about if I want to apply some onhover events to some tiles on the overlay maps? For what I understood It was harder to put javascript events on Canvas than HTML or SVG.

Hope to see ya around. Welcome to the jungle, I mean Forum!!

SVG events especially with Raphael are probably easier compared to Canvas. While like any other element the canvas can respond to mouse clicks, you have to do your own collision detection. Canvas drawing is not hardware accelerated so it may or may not be quicker.