I keep hearing people talk about "dirty rendering" when it comes to map rendering for HTML5. I've Googled and searched the GameDev about it but there isn't much about it.
- What exactly is it?
- How to implement it properly?
This means that when the background is drawn, not all of it is redrawn every frame. When something on the map moves, the area it used to occupy gets marked as dirty. Then when drawing, you know you only need to redraw that portion of the background. This is beneficial because then you only need to redraw the areas that weren't shown before.
So this is really only beneficial when you don't have many things moving around, otherwise your spending more time figuring out what new areas to draw than if you just redrew the entire background. This isn't too common anymore as the platform is usually fast enough to redraw everything without issue. Since this is really just an optimization feature, I'd ignore it for now, and come back to it if you find that performance is lacking.
Rendering in most games takes place within a loop (the game loop) and in each iteration of the game loop the entire backbuffer is cleared (in this case your canvas) and redrawn from scratch.
The term dirty rendering is referring to a technique where instead of clearing the entire canvas every frame, you only clear it on demand (i.e. only when something changed in the scene) and possibly only a portion of it (i.e. only the portion where something changed).
This process of marking only a portion of your canvas to be redrawn is what is what dirty is referring to (i.e. that portion of the canvas is dirty and needs to be redrawn but everything else is still clean and shouldn't be touched).
I have no idea if there's some special way for you to implement this in HTML5, but I found this resource which might give you some ideas.