Home
Greetings fellow webonauts! KineticJS is an HTML5 Canvas JavaScript library that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.
Kinetic stages are made up of user defined layers. Each layer has two canvas contexts, a scene context and a buffer context. The scene context is what you can see, and the buffer context is a special hidden context that's used for high performance event detection. Each layer can contain shapes and groups of shapes. The stage, layers, groups, and shapes are virtual nodes, similar to DOM nodes in an HTML page.
All nodes can be styled and transformed. Although KineticJS has prebuilt shapes available, such as rectangles, circles, images, sprites, text, lines, polygons, regular polygons, paths, stars, etc., you can also create custom shapes by instantiating the Shape class and creating a draw function.
Once you have a stage set up with layers and shapes, you can bind event listeners, transition nodes, run animations, apply filters, and much more.
- Object Oriented API
- Node nesting and event bubbling
- High performance event detection via color mapping hash
- Layering support
- Node caching to improve draw performance
- Nodes can be converted into data URLs, image data, or image objects
- Animation support
- Transition support
- Drag and drop with configurable constraints and bounds
- Filters
- Ready to use shapes including rectangles, circles, images, text, lines, polygons, SVG paths, and more
- Custom shapes
- Event driven architecture which enables developers to subscribe to attr change events, layer draw events, and more
- Serialization & de-serialization
- Selector support e.g. stage.get('#foo') and layer.get('.bar');
- Desktop and mobile events
- mousedown
- mouseup
- mouseover
- mouseout
- mouseenter
- mouseleave
- mousemove
- click
- dblclick
- touchstart
- touchend
- touchmove
- tap
- dbltap
- dragstart
- dragmove
- dragend
- beforeDraw
- afterDraw
- Speed
- Scale (lots of nodes)
- Flexibility
- Familiar API (for devs with HTML, CSS, JS, and jQuery backgrounds)
- Extensibility
