kineticjs layers redraw optimization
background: i am developing a real-time multiplayer html5 canvas game using kineticjs which primarily will be played on MOBILE PHONE BROWSERS. There's a lot going on in the game such as socket communication with the server every second, redrawing and animations using kineticjs based on the server response and all this on top of a heavy graphic interface. The game functions well in desktop browsers however is SLUGGISH on mobilephones. So, I need to find all the ways in which the code can be optimized. My questions, lets say I need to redraw a particular part of the screen based on a server response that I just received from server, should I keep these need-to-be-redrawn elements in a separate layer, so that I need to redraw fewer elements. As in my case I need to redraw ever second, will this lead to performance improvement? If the answer to the above is yes, then what is the optimal number of layers in which I should divide my layout. I ask this because I have a lot of different parts on the screen that need to be redrawn based on different server responses (although not all at the same time), if all these need to be put in separate layers, I need to know how far I can stretch the logic above, for example can I have 10 different layers without sacrificing the performance which is the aim of all this exercise anyway.
Eric Rowell (creator of KineticJS) has done some stress tests here: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/ And he says this: "Create 10 layers each containing 1000 shapes to create 10,000 shapes. This greatly improves performance because only 1,000 shapes will have to be drawn at a time when a circle is removed from a layer rather than all 10,000 shapes." "Keep in mind that having too many layers can also slow down performance. I found that using 10 layers each made up of 1,000 shapes performs better than 20 layers with 500 shapes or 5 layers with 2,000 shapes." So your takeaway is that 1.Yes, multiple canvas layers which isolate different groups of redrawables is the way to go. And, 2.To optimize the tradeoff ( overhead of multiple canvas’s vs simplicity of 1 canvas ), you need to test with your own particular code in the environments they will be operating within. Good luck with your game :)
How to hide all group children using kinetic js
Limit resize in Fabric.js
Where are the specs of HTML canvas globalCompositeOperation modes?
How to add a background picture to a Jit infovis spacetree
Covert QR code canvas to image
MouseOver and Mousedown inside a object
Using CreateJS to apply an alpha tween to a drawn line
Increasing canvas height at runtime in Fabric.js affecting object selectable and drag drop in IE9
Is it possible to get values from chart drawed on HTML canvas?
Moving the camera to look at a Plane Object
html5 canvas increase image size
optimizing code for future changes
Dart: SecurityError when getting ImageData from Context
Client Side Image Resizing - canvasResize add multiple file option
HTML5 canvas draw image “Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1” in Android Webview