具有悬停效果的画布平铺网格、平铺表等

我一直在为画布构建一个基于平铺的显示网格。到目前为止，我已经做到了：http://jsfiddle.net/dDmTf/7/

我有一些问题，不能完全掌握是：

1. 初始加载时间太荒谬了。。。我不明白我做错了什么-修复了，发现我渲染的^32比我应该渲染的多
2. 悬停效果"应该"只高亮显示互动程序的边界，它会擦除它，如果不重新渲染整个画布，我就无法恢复上一个互动程序
3. 如何使用波浪表，为我提供单个图像而不是一堆小图像
4. 调整窗口大小（调整画布大小）也会擦除画布。我需要重新渲染吗？或者，当宽度/高度发生变化时，我可以保持各种事物的状态吗-添加了一个onresize回调，它会重新渲染地图。也许不是最好的方法
5. 多层？如何允许透明.png文件相互重叠

这些都是我现在遇到的主要问题，任何指导都将不胜感激。

此外，如果您有我的javascript的任何指针，请放心！我不断地学习，我确信我做错了很多事情。

编辑

仅供参考，我只是复制粘贴了当前显示在jsfiddle上的精灵图。这不是我打算使用的，但它比上传更容易。我计划维护一个32x32的网格，而不是（看起来是）来自tilesheet 的16x16网格

编辑

我现在有一个32x32的瓷砖表显示在那里，但悬停效果仍然在破坏它，我不知道如何"知道"旧的值是什么。