Thursday, November 20th, 2008

Liquid Canvas: Draw inside canvas with a DSL

Category: Canvas, jQuery


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

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

Posted by Dion Almaer at 8:11 am

3.4 rating from 24 votes


Comments feed TrackBack URI

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?

Comment by tj111 — November 20, 2008

what happened to SVG and #selector{ background-image:url(foo.svg); } ?

Comment by p01 — November 21, 2008

@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.

Comment by loveencounterflow — November 24, 2008

take a look in this (wrongly spelled =P) sugestion and agree =)

Comment by RodrigoCardoso — November 26, 2008

Leave a comment

You must be logged in to post a comment.