KineticJS tips and tools

KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

This is collection of any usefull KineticJS stuff. Please fork and make pull request or create issue if you have something interesting!

Let's go!

Content:

• Applications
• Plugins
• Performance
• Possible problems
• Articles
• Other

So many information you can find on site: http://kineticjs.com/

Applications:

• https://github.com/thehung111/node-discussion-board
• https://github.com/mihhail-lapushkin/Ancient-Riddle
• https://github.com/thehung111/simple-mobile-mockup

Plugins:

• Debug mode
• Crosshair Shape
• Multi touch support - allow you to drag multiple nodes at same time
• Greensock plugin for Kinetic

for work with other libs and frameworks:

• Knockout plugin
• Backbone plugin
• React plugin

Performance:

First, look at tutorial section on site:

• Layers
• BatchDraw
• Caching
• Setting transformsEnabled = 'position' on shape
• Setting hitGraphEnabled = false on layer (if you don't need pointer events)
• Avoid to use shadows and strokes

Also this stackoverflow posts can be useful:

// TODO : rewrite tips from answers to this file

• http://stackoverflow.com/questions/16191324/performance-problems-with-html5-canvas-in-some-mobile-browsers
• http://stackoverflow.com/questions/18786085/kineticjs-moving-4000-tiles-with-stage-draggable?lq=1
• http://stackoverflow.com/questions/17973947/how-to-cache-a-whole-layer-right-before-dragstart-and-revert-it-back-on-dragend/17997291#comment26545467_17997291

Mobile tips:

• Try to set viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

• If you have bad performance on retina display you can try to change pixelRation:

Kinetic.pixelRatio = 1

Possible problems:

Ghost shapes

Sometimes android device may have ghost shape on canvas. This is android bug. You can fix it by drawing layer with small (50ms) timeout. See for details: ericdrowell/KineticJS#481 (comment)

Please follow this article.

var stage = new Kinetic.Stage(conf);
var layer = new Kinetic.Layer();

stage.add(layer);

setTimeout(function(){
    // add shapes to the layer and then do layer.draw()
}, 50);

Some android devices have problems if parents of canvas have overflow:hidden. This snippet may be helpful:

if (navigator.userAgent.match(/Android/i)) {
    $("canvas").parents("*").css("overflow", "visible");
}

You can find more related information here: https://code.google.com/p/android/issues/detail?id=35474

Caching

Currently (v5.1.0) KineticJS has problems with cache if node has some transformation (rotate, scale, offset), so if you have any problems with caching try:

1. Reset transform
2. Cache node
3. Apply transform again

Articles:

// TODO: check is it useful and talking about current version // TODO: add descriptions

• http://www.techrecite.com/html5-canvas-disc-rotation-animation-using-kineticjs/
• http://jasonds.co.uk/Blog/analog-clock-kinetic
• http://www.creativebloq.com/create-game-kineticjs-9134437
• http://www.gamingthinktank.com/2013/06/03/tutorial-part-2-snake-game-using-html5-canvas-and-kineticjs/
• http://www.creativebloq.com/create-game-kineticjs-9134437
• http://www.script-tutorials.com/snake-game-using-html5-canvas-and-kineticjs/
• http://cases.azoft.com/how-to-create-html5-canvas-animated-transitions-with-kineticjs/
• http://codefedonarts.com/2013/02/13/interactive-pie-chart-with-kineticjs-tutorial/
• http://mihhaillapushkin.wordpress.com/2013/03/11/the-makings-of-a-mobile-canvas-game/
• http://codeslashslashcomment.com/2012/12/12/dynamic-image-distortion-html5-canvas/#more-179

Other:

• TypeScript Definition
• Using kineticjs with coffeescript
• Drag&Drop DOM image to canvas
• Tween fillGradientColorStops Example