Download

CAKE on Google Code

About

CAKE is a scenegraph library for the canvas tag. You could say that it's like SVG sans the XML and not be too far off. This page is a showcase of CAKE feature tests.

Things CAKE adds to canvas

• Keeps track of the current transformation matrix [bug]. Basically duplicating canvas's entire transformation system.
• Fixes Firefox's isPointInPath() [bug, WONTFIX]. Implements isPointInPath on browsers that lack it (Safari [bug, FIXED], Opera 9.2), with accurate tests for circles and rectangles, and inaccurate bounding box test for paths.
• Implements transform() and setTransform() (thanks dojo) on browsers that don't have them (Firefox 2, Safari [bug].)
• Transforms for patterns and gradients, SVG-style. Probably doesn't work on Opera. A pattern-space transformation matrix would be nice.

Platforms tested

• Linux x86 (64-bit): Firefox 2, Firefox 3b
• iPhone: Safari
• Linux x86 (32-bit): Firefox 2
• Windows XP: Firefox 2, Firefox 3b, Safari 3b, Opera 9.5b

Browser support

• Firefox 3 beta

  weird choppiness on x86_64 Linux [bug], no drop shadows [bug], globalAlpha doesn't affect patterns [bug], mozDrawText API lacks a way to get the font height and baseline [bug]

• Firefox 2.0

  no text, non-pattern images are slow, no drop shadows, globalAlpha doesn't affect patterns

• Safari 3

  no toDataURL [bug, FIXED], no text, no-repeat image patterns break when transforming [bug, FIXED], linear gradients get ugly when rotating [bug, maybe related], runs like a bat out of hell

• Opera 9.5 beta

  no text, no drop shadows, some broken (and slow) composite operations, scaled circle strokes are buggy (small gap between first and last point)

• Opera 9.2

  some basic features work, scaled circle strokes are buggy, slow

• IE

  a couple things work with ExplorerCanvas but it gets VERY SLOW after a few hundred frames

Canvas wishlist, roughly in order of importance

• Access to the current transformation matrix
• Pattern-space transformation matrix
• Masks
• SVG filters
• A text API with: CSS style object as ctx.style (not string), text as path, text along path [as path], font metrics, fast selection path with text bbox rectangles
• Groups (like in Cairo)
• Fast pixel access (JavaScript is slow, converting JS data to native data is slow)
• Conical gradients, object space gradients, repeating gradients, mirrored gradients, etc.
• More blend modes. At least multiply, screen, darken, lighten, color and value. Overlay would be nice too. Maybe soft light, difference, dodge and burn as well.
• SVG fill rules
• isPointInStroke
• drawElement for drawing HTML elements
• Dashed strokes
• Rename 'lighter' to 'add' and 'darker' to 'subtract'.

Contact

Blog: fhtr.blogspot.com

IRC: kig on irc.freenode.net and irc.mozilla.org

Email: ilmari.heikkinen gmail com