Cocoon JS and Kinetic JS - html

Question

I am developing an educational game for children (D&D, colors, shapes, numbers, etc) and I am using KineticJS for that purpose. It runs fine on Ipad 4 and Iphone 5, but on Android devices it runs with a very low framerate (Galaxy Tab 2 and Galaxy S2). I tried to compile the app with Cocoon JS to enable canvas acceleration, but it gets stuck on launch screeen (with phonegap build it runs fine).
Do I have to make any changes in the Kinetic source code to build on CocoonJS? Are there any alternatives to improve Kinetic performance on android devices?

Answer 1

Cocoonjs cannot render the parent container (its a div). You need to overwrite the prototype of Kinetic.
Kinetic.Stage.prototype._buildDOM = function() {
this.content = this.attrs.container;
this.hitCanvas = new Kinetic.Canvas(0, 0, true);
this.bufferCanvas = new Kinetic.SceneCanvas({
pixelRatio: 1
});
this.bufferHitCanvas = new Kinetic.HitCanvas();
this._resizeDOM();
};
Kinetic.Stage.prototype._getContentPosition = function() {
var rect = this.content.getBoundingClientRect ? this.content.getBoundingClientRect() : { top : 0, left : 0 };
return { top: rect.top, left: rect.left };
};
Then build your main stage as this.
this.stage = new Kinetic.Stage({width: 960, height: 500, container: document.body});