Liquid Canvas

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.

options separated by semicolon

Hello Steffen, I discovered your plugin today on ajaxian and I really like it. It finally made me dive deeper in canvas, which is great.
I'm wondering why you use this syntax:
[border{color:rgba(50,50,50,0.8); width:10} fill] with a semicolon between each options instead of the traditional comma used in JSON and which makes much more sense in my opinion.
Wouldn't this syntax be better:
[border{color:rgba(50,50,50,0.8), width:10} fill]
?

Regards.

Never mind my last comment,

Never mind my last comment, this CSS like syntax is the right one.

jquery :/

Nice work. Too bad it's jQuery. Something like this should be framework agnostic it's easy to use with any framework.

Perfect

Good work ruzee, jQuery is definately the future of javascripts. I loved the work you have done. Just don't worry about the framework crap. They are built for your ease so if you are not using them you are a buzz head.

Really I liked your work

liquid canvas support for shaded border gradients?

Steffen,

Hi.

Thanks for all your work.

I'm building two sites using the shaded-border script. A simple example is available. Obviously, a modification from yours.

The question I have goes to support in Liquid Canvas for the following piece of the shaded-border.js.

var myBorder = RUZEE.ShadedBorder.create({ corner:8, shadow:16 });
var shadowedBorder = RUZEE.ShadedBorder.create({ corner:8, shadow:16 });
myBorder.render('my-border');
shadowedBorder.render('shadowed-border');

I swapped out the shadedborder.js for liquid-canvas.js and liquid-canvas-plugins.js. Also added the jQuery "ready" method javascript on the Liquid Canvas Demo page.

The shaded-border treatment of the gradated image used in the CSS to create the top edge ceased working.

Is this supported in Liquid Canvas? If not, will it be in a late version? Or how does one create this effect using the new javascripts?

Thanks for your help.

Rob.