How to cache static canvas areas in order to gain performance

Question

I am using createjs library, and my game has a large bitmap on the background, in order to fill a window in full HD resolution. In lower resolutions i use a pan and scan like method. But the action is always limited in a smaller area of the canvas.

So i would like to know if it is possible, and how, to gain performance by caching static areas, or using any other technique.

For the sake of the argument here is a graph that demonstrates my situation :

I 've already tried to put the background image behind the canvas element using CSS here :

How to center a canvas on top of a background image

But CSS is driving me insane...so please bear with me... :)

Thank you in advance!

Answer 1

In EaselJS every DisplayObject has a cache method, which is exactly doing what you want - it takes the painted stuff and puts in on a off-screen Canvas: http://www.createjs.com/docs/easeljs/classes/DisplayObject.html Afterwards it takes the image-data from the off-canvas for every repaint (basically it's just a drawImage call afterwards).

Try to only cache painted areas - if you cache empty areas, you will lose performance. However if your background is just a static image you should still keep it as a normal DOM/CSS background - there isn't any performance benefit from caching a bitmap.