KineticJS tips and tools

KineticJS is not maintained any more, see https://github.com/ericdrowell/KineticJS. But I maintain it's fork Konva. You can submit any interesting stuff here https://github.com/konvajs/konva/issues

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 a collection of useful stuff related to KineticJS. 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

Primary source of information is the KineticJS site: http://kineticjs.com/

Applications:

Plugins:

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

working with other libs and frameworks:

Performance:

First, look at the tutorial sections:

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 these 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:

Reset transform
Cache node
Apply transform again

Articles:

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

Other:

About

Collection of different tips, tricks, tools and other usefull stuff for KineticJS.

Other

Languages

Language:JavaScript 100.0%