1

I am experimenting with HTML5 Canvases in an attempt to create some animation. My ultimate goal is to be able to animate a box to a particular location at whim, for now im just animating it across the screen. When I move it across the screen I geta black trail left behind, how do I clear this "dirty" section without removing the background grid?

A jsFiddle of the code is here

Improve this question
0

2 Answers 2

Reset to default
3

Two solutions

  • Redraw the background on the top of animation before moving it to the new location. This so called dirty sprite technique - faster - more complex.

  • Redraw the whole canvas between frames

If drawing the background is a complex operation just hold a prepared background buffered in another canvas for speed.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Hey Mikko, could you elaborate on the dirty sprite technique?
This answer is the right one. Dirty sprite means you should redraw your background (say white) just where your box was the frame before and then draw your box to the next place.
Cool - out of interest, is the "normal" method for animation in canvases to redraw the entire thing every time?
Usually yes, but if you have performance issues then try out the dirty sprite trick.
1

You have to clear what you've drawn if you don't want it to be visible. I assume you don't want to clear entire canvas to avoid redrawing grid and spending CPU cycles. You'll have to do this differently.

Possible solutions:

  • have two same onscreen canvases one over the other. Draw grid on canvas below and don't clear it. Clear part of top canvas and redraw on it.
  • have one on-screen and one off-screen canvas. Draw grid on off-screen canvas. Each time you animate, clear whole on-screen canvas, copy prepared grid from other one, and draw what you need over it.
Improve this answer

4 Comments

seems a bit complicated to do on a HTML page. This flipping mode buffer is more appropriated for other languages I guess.
For me everything is complicated in HTML/Javascript, but that's it's nature. There is really no simpler solution (if you know one I'd really like to hear it). It's really no problem to position elements one over another and draw separately though. Not more than anything else in Javascript.
Sure but then you have to either manage transparency or switch the z-level. Isn't it more simple to draw everything on one canvas and do what the above answer suggests ? (cleaning the canvas or dirty sprite cleaning)
You don't have to manage transparency, as for z-index there is no management you have to do. Just place two canvases, use above one for object, below one for background. You could redraw parts of background you need, but for me this is introducing too much complexity into already messy language. You need to introduce more math for that, and so more failure points. Personally, I'd stay clear but gurus knock yourself out.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.