CAKE – Canvas Animation Kit Experiment

CAKE is a JavaScript library that allows you to use the HTML5 canvas element as a scenegraph, much like an SVG or other vector image. CAKE gives web developers the ability to build up a canvas element with individual elements, much like a vector image, rather than having to deal with pixels.

In this current release, CAKE has a lot of demo page that you can use for learning HTML5 Canvas or just for inspiratons for the next project. It has big size, so this tips maybe useful to minify the file size:

• Use a JavaScript minifier YUI compressor is excellent.)
• Enable your webserver’s mod_deflate-equivalent.
• 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.

Demo:

Example code

• Hello, world! (source)
• Demo page

Rich graphics

• HTML5 Canvas animation demo – works best on Google Chrome (and working OpenGL drivers.)
• 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

• Missile Fleet – a game written with CAKE
• Web Mega Pong – another game written with CAKE

File formats

• CanvasMage – a simple vector image format written in JavaScript

Tutorial: http://www.codeproject.com/KB/scripting/GettingStartedWithCAKE.aspx
License: MIT license

Incoming search terms for the article:

• web canvas animation
• canvas animation
• Cake html5
• html5 animation editor
• html5 canvas animation
• HTML5 animation demo
• jquery cake animation
• html 5 cake
• html5 cake
• html5 canvas animation editor