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.