Multiple backgrounds with canvas drawing

2 April 2009, no comments

The canvas HTML element was invented by Apple. It was created to dynamically create complex images for Widgets. There where a few complaints about the element, but despite of that it is included in the HTML 5.0 working draft. All modern browsers are compatible with the canvas-tag, beside of Internet Explorer, but Google created a superb piece of javascript that ported the canvas to IE. I created a little piece of javascript for drawing multiple backgrounds in a canvas element behind an HTML element.

The syntax

First the syntax to call the function. I use this code to draw the backgrounds behind the header in this site:

$mb(['info'],
['url(http://hanspinckaers.com/img/mainBackgroundTop2.png) no-repeat 8px top',
'url(http://hanspinckaers.com/img/achtergrondHoofdartikel.jpg) no-repeat 8px bottom']);

Examples

You can see a simple example with rounded corners here

Points of improvements

It’s buggy (report bugs please!)
Maybe convert it into a class
Speed (always a good one to improve)
Destination element must have an absolute or relative position declared in his css

Download

Project homepage: at Github. You can download the files from there.

Using it

You have to add these lines before you call the $mb funtion:

<!--[if IE]>
<script type="text/javascript" charset="utf-8" src="changed_excanvas_compressed.js" mce_src="changed_excanvas_compressed.js"></script>
<![endif]-->
<script src="mbmin.js" type="text/javascript"><!--mce:0--></script>

I modified googles excanvas so it is smaller but can only be used to draw images.

If you have any questions, please ask in the comments! And please always keep progressive enhancement in mind, so set a normal replacement background in the css.

Hans Pinckaers