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.

About the Author: Hi! I'm Ken. I've been using mobiles for over 10 years and technology for a lot longer! I'd love to hear from you.

Like this tip? Get the most from your mobile phone...

  • Discover brand new ways to use your mobile phone
  • Techniques to get more out of your mobile phone for less
  • Be the first to learn about new mobile technology

Enter your email to receive free regular Ken's Tech Tips:

  • Javascript , Web 2.0 , Web Development
  • Comments(2)

2 Responses to “Dynamic Gradient Background (Canvas)”

  1. # Stirfryon 08 Apr 2009 at 6:30 am

    Hi, I just made a similar script today but I didn’t work out the IE issues. Awesome. I’m soooo gonna use that IE hack.
    http://h1.ripway.com/stirfry/javascript/tests/canvas/todataurl/index.html

    I made a resizing page with the images set at 100% 100%

  2. # dratinion 26 Feb 2010 at 7:23 pm

    The link is broken, and i think it is so slow…

Trackback URI | Comments RSS

Leave a Reply