javascript - EaselJS: Why does caching make my rendering slower? -

i'm trying improve performance on our canvas (multiple areas) being redrawn on every stage.update(), how works. i'd draw / add single area. can work, previous areas removed because of update. found caching might performance improvement, slows rendering down.

example code:

self.areamask = new createjs.shape(); self.areamask.graphics.beginfill("#000").drawrect(0, 0, 50, 50); self.areamask.cache(0, 0, 50, 50); 

the weird part moment enable caching, makes rendering slower. when decrease optional fourth scale parameter 0.1 performance is, slightly, better.

i'd understand how possible, doing wrong?

is there better way desired behaviour? (only draw / add specified areas, don't redraw areas)

caching improve things in browsers, provided:

1. the browser can put content on gpu. if can not, cpu used draw images, can slower. browsers work fine in cases, see opposite effect. example, easeljs cache demo performs worse in safari, despite working better everywhere else. browsers/devices testing on?

2. the caching done right. if cache ton of small things separately, creating lot of small images in background. better approach use spritesheetbuilder in these cases, reduction in number of textures have improves chances gpu play nice.

3. your caching done once, not lot. if cache every frame (like in tick), caching not effective. because has draw vector/group content each frame off-screen canvas, , draw canvas main stage. more work drawing vectors.

there no support in easeljs draw specific areas of stage. there techniques updating off-screen cache, , drawing once stage - it.

i curious see code in action, , might able tell why isn't working.