Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?
share|improve this question
up vote 12 down vote accepted

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.

share|improve this answer

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.

share|improve this answer
Thanks for the link! – foobar Mar 27 '12 at 23:34

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.