canvas motion too slow on blackberry webworks

Question

Hi I wrote a canvas animation using htlm5 and JavaScript. The motion is almost normal when running on my windows browser. But when I build it and run it on blackberry mobile, the motion decrease may ten times less faster. How can I do for that performance? The more, I am using the form input to let users modify sizes of the graphics. But as soon as the values are modified in the text box, the graph is resized. How can I do to resize it only when the button is clicked?

Answer 1

The problem may relate to JS performance OR canvas drawing or both. Do the following:

1) run a non-painting related JS function a thousand times or whatever in the BB browser and see how it performs. Some JS activites take a long time. If it's ok, then it's the painting that is the problem.

2) the issue with the BB Canvas tag is that clearing it, and rendering it (ie when you stop painting on in at the BB device flushes it to the screen) are both slow. The actual act of calling painting functions on the canvas are not slow. Also - if you are moving the canvas, BB pukes really hard, it might be reallocating entire buffers for that so it will be slow.

Options:

• slow down your animation rate - a lot. If you are re-drawing the entire widget many times a second - this will not work.
• reduce the canvas to as small as possible. A tiny canvas will have no problems. A screen sized canvas takes a second to clear, and maybe 1/5 of a second to paint.
• don't clear any part of the canvas if you have to.

All of this may mean designing an entire new form of painting ... Unfortunately, html 5 on BB just is not suited to animations. I'd strongly recommend using regular images, and then moving/replacing images as necessary using regular old html div positioning to create an animation.

Answer 2

Is your code optimized? I had a similar problem using JQuery for position finding, around 5000 times it took 30 sec. on ipad, I changed code from

pos2 = jQuery('#n_'+Counter3).position().top; 
to
pos2 = document.getElementById('n_'+Counter3).offsetTop;

and it now takes less ten 1 sec.

jQuery probably checks for different browsers as some use offset some say top etc. so it gets you the right value every time without you having to worry about browser (but probably javascript has to execute a bunch of if statements x 5000).

In my case I targeted IPad you are going for blackberry so optimization can speed things up without having to worry about crossbrowser compatibility.