5

Our Mobile web application includes an interactive designer which we have realized using HTML5 canvas and Kinetic.js. We are trying to render around 353 objects onto the canvas dynamically, of which 178 are text and the rest are lines and rectangles.

During a pan or scale operation, the canvas becomes unresponsive. It appears that this behavior is exhibited only on an android device as the same works exceptionally well on IOS. We also tried the same application via browsers directly and noticed a similar unresponsive behavior on the android browser and chrome. Firefox is comparatively responsive.

We did try the options provided in the following links but the problem persists (i.e. multiple canvas layers) 1) Performance slow with kineticjs 2) Performance problems with HTML5 Canvas in some mobile browsers.

The approach specified in the links KineticJS - Moving 4000 tiles with Stage.draggable , How to cache a whole layer right before dragstart and revert it back on dragend? appears promising, but we may not be able to go with this as our designer will contain quite a few user interactions (like drag-drop drawing sections).

I also did find another question here citing a similar problem https://stackoverflow.com/questions/18853952/kinectic-js-performance-on-android-4-1-devices-especially-pan-and-zoom-is-unre

Are there any other possible solutions/ fixes to improve this performance, please do help.

EDIT: We tested our app on the following devices 1) Samsung Note 800 (Android 4.1.2) 2) Samsung Tab 2 (Android 4.1.2) 3) ASUS Transformer Pad TF300TG (Android 4.2.1) and 4) Nexus 7 (Android 4.3).

Community
  • 1
  • 1
chirag kalyanpur
  • 122
  • 1
  • 10
  • Hi, have you solved your problem? I have even one additional problem with KineticJS + Android WebView => there are some glitches while drawing for some reason on ASUS TF300TG. Not on Nexus 7. Didn't test on other devices. – sasha.sochka Oct 21 '13 at 19:44
  • No Sochka, I am yet to find a solution for this. I also did try rendering the objects via plain canvas javascript api and suprisingly it works very well on chrome and firefox. Performance on the webview improves only slightly. I tried a pre-render(without kinetic), but on scaling beyond a certain extent the text and lines begin to pixelate. Still trying to find a solution :( – chirag kalyanpur Oct 24 '13 at 13:37
  • May be helpful for someone: https://github.com/lavrton/kineticjs-tips-and-tools#performance There are several tips for performance. Also include android tips. – lavrton Apr 13 '14 at 03:24

1 Answers1

2

You will definitely need to cache the stage as an image immediately before dragging and dropping because if you try to render hundreds of text elements in canvas very rapidly (native canvas or KineticJS) the performance will be slow, especially on Android. On drag end, you can destroy the cached image with destroy().

Eric Rowell
  • 5,191
  • 23
  • 22
  • Sure Eric will try this out. We had tried a pre-render to image initially, but kind of stopped looking into this as scaling beyond a certain point resulted in blurring of text and lines (due to interpolation). I did find a couple of links on preventing interpolation - will look into this further. – chirag kalyanpur Oct 29 '13 at 05:24