Multiple backgrounds with canvas drawing
by Hans Pinckaers
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:
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.
An attention-grabbing discussion is worth comment. I think that you must write more on this subject, it might not be a taboo topic but typically people are not sufficient to speak on such topics. To the next. Cheers
It抯 laborious to search out knowledgeable individuals on this topic, but you sound like you recognize what you抮e speaking about! Thanks
This site is really a stroll-through for all the information you wished about this and didn抰 know who to ask. Glimpse right here, and also you抣l positively discover it.
WONDERFUL Post.thanks for share..more wait .. ?
Your home is valueble for me. Thanks!?
There’s noticeably a bundle to know about this. I assume you made sure good factors in options also.