I'm currently in the process of building both the client and server side of an html5, canvas, and WebSocket game.

This is what I have thus far for the client: http://jsfiddle.net/dDmTf/7/

Current obstacles

1. The hover effect has no idea what to put back after the mouse leaves. Currently it's just drawing a "void" tile, but I can't figure out how to redraw a single tile without redrawing the whole map.
2. How would I go about storing multiple layers within the map variable? I was considering just using a multi-dimensional array for each layer (similar to what you see as the current array), and just iterating through it, but is that really an efficient way of doing it?

Side note

The tile sheet being used for the jsfiddle display is only for development. I'll be replacing it as things progress in the engine.

I hope you can help!

Hopefully you guys can help me, I've been struggling to get through things, since I'm learning how things kind of stuff works as I go.

If you guys have any pointers for my JavaScript, feel free. As I'm more or less learning advanced usage as I go, I'm sure I'm doing plenty of things wrong.

Note: I will continue to update this post as the engine improves, but updating the jsfiddle link and updating the obstacles list by striking things that have been solved, or adding additions.

Thanks!