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
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.