Poor Pan, Scale performance on Android Webview using HTML5 Canvas and KineticJS

Question

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).

Answer 1

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().