Automatically fade background with Canvas and javascript

Comments // Written on Mar 26, 2009 // Net, Open Source

Using complex background images for div elements is very useful to create nice effects on web pages. Most of the images used as BG have a central pattern and then a gradient which ends at the image borders. If you use one of these image as background of a div you need to make them of the same size of the div (or bigger) so that it is able to cover the whole space with the gradient. Doing this means manually manipulating an image, increasing and decreaing its width/height.

I created a JS library that provides a simple way to avoid image manipulation, using Javascript to retrieve colors informations about the latest pixels of the image and to repeat that pattern until the end of the div. You don’t need to open any graphic program, you don’t need to add other divs, just include the script and it will do the dirty job for you.

If you’re interested on how this script works and what you could achieve by using it, you can retrieve more informations on the project page. Also take a look at the labs page, where you can see the script in action.