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

Downloading Image Canvas Element
I'm starting to build a grid using HTML5 and JS, but this doesn't work?
Hide/disable tooltips chart.js
HTML5 - Canvas available contexts
erase line in canvas with image background
Fabric toDataUrl with multiplier not working as expected
Intercction objects fabric.js
How to align fabric.Image objects horizontally?
Draw line from one dot to another using mouse event
waving flag waving flag
Fill rectangle with stretched image with Fabricjs
taking a 'snapshot' of babylonjs scene sometimes works, sometimes doesn't
Speed html5 canvas
graphics.bf(img.image).s().p(“xxx…”) can't show image correctly
WebGL Clears Between Each setInterval [duplicate]
Stroke Effect on Arabic Text At Junctions

Categories

HOME
groovy
google-apis-explorer
xaml
robotframework
stack
gluon
application-cache
netbeans-8
calayer
overloading
command-line-arguments
axure
facebook-opengraph
plots.jl
next
gyroscope
pydev
windows-applications
jet
amazon-cloudfront
esri
skyscanner
outlook-vba
mask
jupyter-irkernel
response
php-5.5
tern
mergesort
pulseaudio
adsutil.vbs
hostapd
multistore
orchestrate
simple.odata.client
paypal-webhooks
mapr
replicate
xceed
ckcontainer
texture2d
vlc-android
enhanced-ecommerce
angularjs-filter
asp.net-webpages
lidar
cucumber-java
skrollr
filenet-content-engine
sejda
crosswalk
multiscreen
pegkit
spatial-index
linegraph
byte-order-mark
movie
antiforgerytoken
generalization
declaration
twitter-follow
janino
servlet-listeners
mklink
imaging
private-methods
syndication-feed
yourls
data-dictionary
disabled-input
libavcodec
bochs
str-to-date
datasift-python
source-highlighting
calloc
asp.net-session
rgba
quilt
ms-access-97
postgresql-8.1
duplicate-data
codi
indextank
cassandra-0.7
pinging
large-teams

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