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
New Contributor
Posts: 3
Registered: ‎04-27-2011
My Device: Any
My Carrier: Maybe

Canvas in BlackBerry

Hi, my animated canvas runs well on windows browser. But it 10 times lower when running in Blackberry mobile.

What can I do to gain performance?

Is it a "blackberry-2d" context in canvas?

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

Re: Canvas in BlackBerry

Hi Le_Bedel,

 

BlackBerry Smartphones and PlayBook only support a 2D canvas and not 3D.  The PlayBook should be quite fast when it comes to Canvas animation and BlackBerry OS6 should be pretty performant as well.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Developer
Posts: 39
Registered: ‎03-01-2011
My Device: PlayBook
My Carrier: AT&T

Re: Canvas in BlackBerry

i had this problem with canvas animations on palm's webOS.  you need to make sure your timing isn't too small of intervals that it refreshes the screen very, very often.  this will impact performance.  also review your code as much as possible to cut out operations that are unnecessary or repetitive and call functions instead.  i've done quite a few apps in canvas, and you're certainly going to run faster in a browser.  i've already had a review that my app is a little choppy on the pb, but until i can test it myself (hopefully soon) it'll stand as is. in the meantime i'm reviewing my code for performance enhancements.

Developer
Posts: 125
Registered: ‎01-17-2011
My Device: Playbook
My Carrier: Vodacom

Re: Canvas in BlackBerry

[ Edited ]

Same here - I don't seem to be able to get anything much above 20 frames a second on canvas. And thats even with the bare minimum.

 

I added animation toggle switches and if all is off, then I get the 56fps that I configured.

As soon as I add one animated ball bouncing off the canvas walls, it drops to 15fps.

 

I've also looked at some other html5  performance tests and it seems that the playbook doesn't render faster than about 20 fps .. - maybe this intended to save on CPU/Battery ?

 

Will add more tests to see if I can get more fps in canvas animation.

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

Re: Canvas in BlackBerry

It's really simple with Canvas. The more you draw on the canvas each frame, the slower it gets. It gets especially slow when you use a lot of gradients or alpha transparency.

 

That said I'm getting pretty awesome performance on the PlayBook. In my app 'Screamager' each frame draws over 600 30x30 pixel images based on bitmaps on a fullscreen canvas with DrawImage().

 

With this pretty darn heavy lifting I get around 10fps (which is just about perfect for my app) so I'm quite impressed with the Canvas speed at least on the PlayBook.

 

 

Staff UI Prototyper (read: full-time hacker)


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

Developer
Posts: 39
Registered: ‎03-01-2011
My Device: PlayBook
My Carrier: AT&T

Re: Canvas in BlackBerry

have you tried creating svgs on the fly?  do they have a more positive or negative impact on performance over using the drawimage() function or drawing directly in canvas?  i've been interested in playing around with svgs since the drawn items have their own dynamic properties unlike the staticly drawn canvas elements.

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

Re: Canvas in BlackBerry

I have personally never tried SVG. Might be interesting to try at some point.

 

That said, I've been on (literally) an over a year long quest to get Screamager's animation player to run at a decent speed. I've had multiple iterations using DOM/HTML which was slow. I have created a full renderer in Canvas that actually draws all content which was still slow. I finally nailed it with using bitmaps and DrawImage and got the performance I was looking for. Any faster than I have it now would not make sense for my particular application because if it runs too fast you can't see what's going on on the display anymore Smiley Wink

Staff UI Prototyper (read: full-time hacker)


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

Highlighted
Developer
Posts: 125
Registered: ‎01-17-2011
My Device: Playbook
My Carrier: Vodacom

Re: Canvas in BlackBerry

 

Update: Got my framerate to increase from about 17fps to 30+ fps by only clearing the area drawn instead of the whole canvas.

 

Test Specs:

Canvas size used: 300x600 pixels 

Ball/circle being drawn: 30x30 pixels bounding.

 

Tests:  

- draw stroke arc

- draw filled arc

- draw pattern arc

- draw image (rectangular blit to a 30x30 area, no scaling)

- draw image data (fails for some reason - permissions ? still to debug)

 - and a  couple more variations ... 

- and still got a couple more ideas to test  (hopefull with further fps improvements)

 

 

 Any other ideas welcome though Smiley Wink