Skip to content
ericdrowell edited this page Jul 15, 2012 · 88 revisions

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.

Features:

  • Object Oriented API
  • Node nesting and event bubbling
  • High performance path detection, pixel detection, and collision detection
  • Layering support
  • Data URLS, image data, and caching support for the stage, layers, groups, and shapes
  • 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
    • mousemove
    • click
    • dblclick
    • touchstart
    • touchend
    • touchmove
    • tap
    • dbltap
    • dragstart
    • dragmove
    • dragend

Guiding Principles

  • Speed
  • Flexibility
  • Familiar API (for devs with HTML, CSS, JS, and jQuery backgrounds)
  • Extensibility

Links

Clone this wiki locally