html5-canvas


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 :)

Related Links

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
Is there a way to load an image in the canvas object without using javascript?
HTML5 canvas draw image “Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1” in Android Webview

Categories

HOME
sbt
mocking
xaml
dynamics-crm-365
apt-get
direction
rtmp
tcl
parse.com
datetime
image-segmentation
api.ai
visual-studio-2012
active-directory
httpbuilder-ng
coded-ui-tests
plotly
clion
xorg
zebble
pymc3
frequency
luci
nanotime
union
spring-cloud-consul
embed
prerender
lazy-loading
drupal-commerce
atg
aspdotnetstorefront
missingmethodexception
microphone
broker
bitcode
hawq
true-type-fonts
clappr
toastr
django-users
azure-api-apps
chai
tweenmax
rhel7
paypal-rest-sdk
angular-xeditable
otroslogviewer
protobuf-3
azure-management-api
btle
backwards-compatibility
mediawiki-api
website-hosting
xssf
ios-app-group
master-data-management
ietf-netconf
agile-processes
configuration-profile
tfs2008
rails-console
vb4android
cglib
app-engine-ndb
bash-completion
sliding
jquery-load
sqlj
fab
ssha
materialdrawer
symbian
avalonedit
selectsinglenode
mailx
vbo
iphone-5
keypad
gevent-socketio
twitter-follow
symfony-2.5
jet.com-apis
iphone-privateapi
textselection
twill
sirtrevor
dfsort
batman.js
confirmation
blueprint
resolver
ioerror
webcal
alternate-data-stream
symfony-2.2
asp.net-session
cellid
letter-spacing
proxy-classes
payment-services
treetop
nstreecontroller
servletunit
eclipse-tptp
crc-cards
database-dump

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App