Liquid Canvas is a JavaScript library which allows you to draw inside an HTML canvas element with an easy yet powerful description language.

It can be used to add graphics to your web page without ever touching an image creation tool such as The Gimp, Inkscape or Photoshop.

Check out the Demo and the basic example and then download version 0.3.

The demo is a good way to find out what Liquid Canvas can do for you. It will also teach you the concepts of the descriptive language of Liquid Canvas – yeah I’ve decided to “invent” a new language; guess it’s because I just love hacking parsers…

Features

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

Of course Liquid Canvas can be used to render rounded corners with drop shadow – what else did you expect from me? 😉 Here’s a code snippet for that:

$(window).load(function() { $("#example").liquidCanvas( "[shadow border gradient] => roundedRect{radius:50}"); });

As you can see Liquid Canvas is a jQuery plugin. You call it on the elements you wish to “enhance” graphically.

Thanks go out to the guys from jQuery which Liquid Canvas heavily uses, and the makers of excanvas which comes to action on Internet Explorers.

Known issues

jQuerys $(document).ready() somehow messes up Liquid Canvas on Internet Explorer 6 and 7. Use $(window).load() as a workaround on these browsers.

Changelog

0.3 – 2009-04-09 – Fix positioning bug

0.2 – 2009-03-23 – Add support for Internet Explorer 8

0.1 – 2008-08-11 – Initial version

Comments have been closed – please use the Forum.