ZIM js JavaScript Framework

Canvas Components, Controls and more!

Optimizing HTML 5 Canvas JavaScript with CreateJS and ZIMjs


First and foremost, CACHING shapes and text can dramatically improve performance.  The first mobile tests I could not get smooth transitions – then I cached the container at the stage dimensions and slid or faded this and it was smooth!  To cache it is easy:


or whatever rectangle you want to cache.  You then need to uncache or updateCache to make any changes.  BUT – this post is not about caching which is a well documented and known technique. ZIM creator, Dan Zen, explains:

Here are a couple things I ran into making mobile apps with ZIM both of which prompted updates found in version 2.3.  One thing to note, is that CreateJS has done a great job at optimizing by separating out the stage updates from the operations.  I just did not quite believe it was always necessary.  Now I know better.

My initial performance woes were three fold – and this was a good thing.  Because I solved the two lesser of the effects first and then found the big problem.  If I had found the big problem first, I might not have made the smaller changes which are still important for optimization.

The two lesser issues, although perhaps more important overall because it effects most of the ZIM components are 1. operating on click rather than MOUSEDOWN as clicks on mobile tend to have a lag probably to monitor for swiping, and  2. UPDATING the stage so that you could see the effects of the component.  For example – to see the slider slide or the checkbox check, etc.  I found there was a noticeable difference on mobile if several things update at the same time. 

I noticed this earlier when I was animating with zim.move or zim.animate each having their own Ticker.  So I had previously updated the functions to optionally operate without the built in Ticker.  Of course, this is what CreateJS already had done – but I found it annoying to make a Ticker to move something.  A neat technique is to use longer animate or move function with the Ticker and the rest without – and the one Ticker will update for the others.

So to solve the issues for the components, I started in on this same technique of putting the option to update and the option to mousedown right in each component – sigh… more parameters.  Then I got thinking that if you are wanting to optimize for mobile, a global setting would be more handy so I introduced two settings for the top of your script:

zim.OPTIMIZE – components do not call stage.update() (default false)
zim.ACTIONEVENT – default “mousedown” but can change to “click”

The MAJOR SLOWDOWN in the app Zen was making – which was a pixel drawing app with the drawing functionality shown here – was that a grid of 13X13 squares or 169 zim.Rectangle objects were being used.  A zim.Rectangle is a createjs.Container with a createjs.Shape in it.  Zen explains:

There were two problems here.  One, 169 rectangles were slowing down the loading of the pages.  They should have been at least cached but I was using them as smaller “live” thumbnails of sets of drawings and it was tricky to come up with a solution as the scaled down cached grids did not render the lines well and a grid made at a small size could not give fidelity on the lines.  Caching the container was tricky due to the complex dynamic scaling of zim.Layout.  Two, I was using zim.hitTestPoint() to find if the cursor was on any one of the squares and checking 169 times on pressmove was too much for the mobile devices to handle – all this was fine on desktop.

So, I had a rethink.  I could use the location of the cursor relative to the grid to calculate where on the grid it was.  That way I could just draw one shape and update the shape when the cursor entered a calculated square region.  I added a zim.hitTestGrid() function and speed IMPROVEMENT for both loading and capturing mouse roll position was amazing.  Thank goodness!

Another thing you can do to optimize for mobile is turn off ROLLOVERS. With CreateJS this is off by default but zim.Frame used to turn it on with a parameter for you to turn rollovers off.  In ZIM 2.3, rollovers are now automatically set using zim.mobile() to test for mobile devices and set rollovers to false in on a device.  The mobile test might not be perfect so you are welcome to pass in false as the fourth parameter just to be sure.

All the best, and if you have any issues, find us on Facebook.




One comment on “Optimizing HTML 5 Canvas JavaScript with CreateJS and ZIMjs

  1. Pingback: ZIM 2 DUO – CreateInTO Talk – What’s Bubbling on the HTML 5 Canvas? – ZIM js JavaScript Framework

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s


This entry was posted on January 11, 2016 by in mobile.


%d bloggers like this: