Thursday, November 20th, 2008
Liquid Canvas: Draw inside canvas with a DSL
-
-
$(window).load(function() {
-
$("#example").liquidCanvas(
-
"[shadow border gradient] => roundedRect{radius:50}");
-
});
-
This is an example of Liquid Canvas, a new library from Steffen Rusitschka who created ShadedBorder and RUZEE.Borders.
Liquid Canvas is a JavaScript library which allows you to draw inside an HTML canvas element with an easy yet powerful description language.
- Automatic generation of HTML canvas elements which scale with their HTML container, e.g. a floating DIV
- Abstraction of canvas - each HTML element gets a "paint" method
- Works with plugins for rendering
- Loads of plugins already exist
- Own plugins are possible
- Simplified render language for plugin-based rendering
- Rendering language uses a CSS-like syntax for plugin styles
- Based on HTML Canvas, jQuery, ExplorerCanvas
- Tested on Firefox, Internet Explorer, Safari, Chrome













Rounded corners without sliding doors or extra markup? Assuming it works as described (not messing with layout/style rules), this is pretty sexy. Any insight as to how this would affect accessibility?
what happened to SVG and
#selector{ background-image:url(foo.svg); }?@p01: if that happened to have been a bad idea with lots of ways for browser vendors to introduce subtle incompatibilities, rest assured it has been or will be (in 2022) sanctioned by the w3c and is on its way into browsers (and not be implemented in ie8). if that was a good idea, expect an outcry from the accessibility people and the standards toters, alongside with a critical discussion on the web that show you how to achieve the same effect with some javascript, ten nested divs, fairly semantic class names, css2 for compatibility, and crossed fingers, but, behold, no tables! in that case, ms will implement the feature in ie8, get all the spam, spawn a new era, and silently drop it again in ie8 servicepack one. ah, rounded corners. people have been talking about that ever since the times of the gold rush.
take a look in this (wrongly spelled =P) sugestion and agree =)
http://www.microsoft.com/communities/newsgroups/list/en-us/default.aspx?cat=en_us_2BAF8EC5-645C-4477-A380-0F1CF6C102F9&lang=en&cr=us&guid=&sloc=en-us&dg=microsoft.public.internetexplorer.beta&tid=1eee4608-f8f8-42ac-b6be-54b64ab302cd&mid=1eee4608-f8f8-42ac-b6be-54b64ab302cd&rmid=1eee4608-f8f8-42ac-b6be-54b64ab302cd&helpful=1&p=1&stgxml=http%3a%2f%2fwww.microsoft.com%2fcommunities%2fnewsgroups%2flist%2fen-us%2fsettings.xml