cakejs


CAKE - Canvas Animation Kit Experiment

CAKE is a JavaScript scene graph library for the HTML5 canvas tag. You could think of it as SVG sans the XML and not be too far off.

UPDATE 2.7.12: A new cake (2.0) is on it's way! With new docs, Closure compatibility, performance tweaks and more, we hope for this to be the most solid release yet.

Released under the MIT license.

2.0 (Unreleased) Features

  • Cacheable containers
  • Lazy scene updates (reduced floating point math)
  • Superior performance, even on mobile
  • Redraw regions
  • Prototype inheritance allowing type coherence and extension

Features

  • Dynamic and extensible JavaScript scene graph
  • Animation timelines and tweening
  • Picking and mouse events
  • Node primitives (ImageNode, Rectangle, Circle, etc..)
  • Works well in complex web layouts

Examples

Rich graphics

  • Flashy website without Flash - silly and a way too heavy drawing load. It's more of a browser benchmark than something you could realistically use.

Games

File formats

  • CanvasMage - a simple vector image format written in JavaScript

Documentation

Documentation is on it's way! The next draft of cake will support JSDocs completely. We'll hopefully have the entire public API uploaded soon.

Tutorials

API reference

See here for JSDoc generated documentation. It's got the toplevel objects, but doesn't have the method documentation from the source code. The cake.js file has JavaDoc-style documentation, but JSDoc doesn't parse it quite right. Suggestions and help most welcome!

Download

  • cake.js fresh off the SVN trunk
  • CAKE does not have a fancy tar-ball, so use SVN to download it. Let's keep the trunk bug-free, shall we?

Contact

Use the issue tracker to report bugs and file feature requests.

Usage tips

  • Use a JavaScript minifier (YUI compressor is excellent.)
  • Enable compression on your web server.
  • If you don't minify CAKE, it'll be 200 kB in size. Minified it's 100 kB and further gzip-compresses to 28 kB.
  • See MinimizingDownloadSize for more details.

Project Information

Labels:
Canvas HTML5 Animation JavaScript Web Graphics Firefox Safari Opera SVG RIA iOS Android IE9 Game