Panning Html5 canvas without rerendering

Question

I would like to pan on my Html5 canvas without having to rerender, in a smooth transition (not jumpy). Is this possible? Are there code examples?

If possible, can this also be applied for zooming?

I have a performance issue when running on a lower end system (windows tablet), where panning just uses up too much cpu and ends up unusable. The scope is ~2000 graphic objects.

Answer 1

Unfortunately, you can't transform a canvas without redrawing it; however, if it is really just a matter of having too many draw calls, you can render the canvas once, cache the result, then on subsequent draws redraw the cached image. Note, this method won't really take well to scaling beyond maybe 150%, depending on the actual stuff you are drawing.

I made a fiddle that shows what this might look like:

http://jsfiddle.net/mobidevelop/sBvab/

There can be a little bit of jumpiness, but it's generally better than it is without caching the image.

Your mileage may vary.