Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB
My Carrier: Sprint

HTML canvas - pretty speedy on the PlayBook

Check out what happened to Screamager's performance when I went from a markup based animator to a HYML canvas based one:

 

Old: 

 

http://www.youtube.com/watch?v=BbUpA6pU2qM

 

New (submitted to AppWorld today so still upcoming):

 

http://www.youtube.com/watch?v=FdsQUECd84w

 

Amazing!

Staff UI Prototyper (read: full-time hacker)


My BB10 apps: Screamager | Scientific RPN Calculator | The Last Weather App

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: HTML canvas - pretty speedy on the PlayBook

Very cool...

 

Was the first slower version using CSS animation/transitions or was it using JavaScript and DOM manipulation?

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Developer
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB
My Carrier: Sprint

Re: HTML canvas - pretty speedy on the PlayBook

First one was a grid of divs where i'd set css classes to each 'pixel' to give them the right color / turn them off.

I had pretty much exhausted my options to speed that method up any more. Then I was going to try and do the animator in Flash but for one my Flash knowledge sucks and I also can't be sure whether it will even be faster.

 

Then I randomly bumped into some page about canvas placing images on it with context.drawImage() and figured it was worh a shot to see how fast that would put 34x18 images on a canvas. I didn't know what to expect because that's a lot of images so it might as well have been slower. And guess what, it was super fast. Way faster than changing 34x18 CSS classes every frame.

 

Needless to say I'm super happy. I finally got the performance I was actually looking for with this app. Until today the animations were no more than some sort of 'tech demo' but now they run at a perfect speed!

 

Hope the test house approves it soon!

Staff UI Prototyper (read: full-time hacker)


My BB10 apps: Screamager | Scientific RPN Calculator | The Last Weather App

New Developer
Posts: 11
Registered: ‎01-25-2011
My Device: Not Specified

Re: HTML canvas - pretty speedy on the PlayBook

Hey, really good demo, thanks! Smiley Happy I had no idea they would act so differently.
Developer
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB
My Carrier: Sprint

Re: HTML canvas - pretty speedy on the PlayBook

Me neither! I always thought it would be slow in canvas. This was merely one of those hmmm... what the heck... attempts if you know what I mean.

 

Very happily surprised. 

 

I do know by the way that canvas isn't fast in all occasions. I have also experimented in not using bitmaps for my LEDs but instead actually draw them all on canvas. This wasn't fast at all. So I guess it really depends on what you're doing. That said, with drawing bitmaps on a canvas being fairly fast I may look into trying some retro-style sprite game with this some time Smiley Wink

Staff UI Prototyper (read: full-time hacker)


My BB10 apps: Screamager | Scientific RPN Calculator | The Last Weather App