Dynamic Gradient Background (Canvas)
March 16th, 2008
A really clever script here which makes use of Javascript and canvas to give dynamic gradient backgrounds.
Here is the problem: when you use the <canvas> tag to manipulate an image or a graphic, it is treated in HTML as an inline object (similar to a super-charged <img>). This means you can’t set a canvas as the background image of a <div> for example.
This script gets around this limitation by using the toDataUrl() function in canvas (supported in Firefox and Opera). toDataUrl() essentially takes the contents of a canvas and turns it into an image, which can then be made into the background of a <div>.
It sounds complicated, check out the JS source if Javascript is your preferred language as opposed to English.
I can see Reflection.js being adapted to work for background images using a similar method, but it’s likely only to work in Firefox and Opera.
- Javascript , Web 2.0 , Web Development
- Comments(0)