jQuery Background Canvas Plugin
The HTML5 standard introduces the <CANVAS> element, a resolution dependent bitmap canvas on which 2D graphic objects can be rendered. With JavaScript one can draw shapes like circles, rectangles and lines on this element. The jQuery background canvas plugin injects such a canvas element behind a div or whatever block element and provides functions to draw on it. When the background of the div is made transparent, this canvas element can be seen and it will provide the new background for the div.

DIV with Rounded Corners and Gradient without CSS
The major use case for backgriund canvas is to draw a rounded corner border and a gradient in the background of a <DIV> element.

Retro Coding and Fallback CSS Layout
With the jQuery Background Canvas Plugin, CSS does the job it is made for: Layouting of semantic html. Abuse of html (tables) and CSS (rounded corners, gradients) for design purposes is no good.

The jQuery Background Canvas Plugin was developed to enhance a search engine friendly and section 508 compliant html and css design. It avoids cluttering the html and css with design elements like layouting tables, css rounded corners techniques, css gradient techniques and so on. This should keep the html code clean, semantic and in a retro style - just as the search engine likes it. This also provides a nice fallback path if JavaScript or CSS is not available.
  1. Display a great design if CSS and Javascript is available (rounded corners, gradients)
  2. Display a nice but simple CSS LAyout without trickery when JavaScript is unavailable (semantic html layouting)
  3. Display retro coded html (perfect for screen readers) if CSS and JavaScripts are unavailable (semantic html)

jQuery layout and background canvas plugin Homepage
(This Site is also a demo of the plugin and uses it excessively to do the gradients, tabs and round corners)

jQuery layout and background canvas plugin Documentation (PDF)

jQuery layout and background canvas plugin project URLs:

Last edited Aug 3, 2009 at 7:45 AM by ThomasMaierhofer, version 7