Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 2 days ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 6 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

HTML5 background gradient effect

AshleyAshley

Yesterday I looked at Geo Location through your web browser and today we’re going to be looking at using the HTML5 canvas to manipulate the colours on mouseover of a background element. The demo was originally put together by Remy Sharp. Lets have a look at the code below.

About the Canvas

The Canvas tag is basically an image tag without an image source. You specify a width and a height for the drawing area. Instead of an alt attribute, you can enclose HTML within the canvas tag itself for alternative content. Checking for the getContext() method on a canvas DOM object is the standard way of determining canvas / browser compatibility.

NOTE. This demo will work in the following browsers. Opera, FireFox, Chrome, Safari. It will NOT work in internet explorer

Here is an example of the HTML5 canvas tags.


<canvas height="600" width="600">
<p>Your browser doesn't support the HTML5 Canvas. Try using Firefox or Google Chrome. </p>
</canvas> 

The JavaScript

The first thing to do in the code below is to setup the canvas element, so in the above code we’ve declared the element on the page but now we need to tell the javascript to use it. So to so this we setup the context of the canvas element as ‘2d’ at this stage if this stage fails and returns false then your browser doesn’t support the canvas.

The script can be broken in to two sections. first section sets up the gradient colour within our canvas element, and the second contains the mouse over function which is the event that is triggered when you hover over the page creating the flaring white area around your mouse.


var canvas = document.getElementsByTagName('canvas')[0],
    ctx = null,
    grad = null,
    body = document.getElementsByTagName('body')[0],
    color = 255;
    
if (canvas.getContext('2d')) {
  ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, 300, 300);
  ctx.save();
  // Create radial gradient
  grad = ctx.createRadialGradient(0,0,0,0,0,600); 
  grad.addColorStop(0, '#fff');
  grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
 
  // assign gradients to fill
  ctx.fillStyle = grad;
 
  // draw 600x600 fill
  ctx.fillRect(0,0,600,600);
  ctx.save();
  
  body.onmousemove = function (event) {
    var width = window.innerWidth, 
        height = window.innerHeight, 
        x = event.clientX, 
        y = event.clientY,
        rx = 600 * x / width,
        ry = 600 * y / width;
        
    var xc = ~~(256 * x / width);
    var yc = ~~(256 * y / height);
 
    grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); 
    grad.addColorStop(0, '#fff');
    grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));

    ctx.fillStyle = grad;
    ctx.fillRect(0,0,600,600);

  };
}

This code is without doubt a beautiful display of what can be done with a simple snippet of JavaScript and the HTML5 canvas element.

download

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 11
  • Enamul Hoq
    Posted on

    Enamul Hoq Enamul Hoq

    Reply Author

    I hope that ,it’s a very learnt-able post so thanks a lot for sharing this with us


  • Matt Lewandowsky
    Posted on

    Matt Lewandowsky Matt Lewandowsky

    Reply Author

    For those wondering about IE compatiblity, it works great in both IE 9 and 10 (read: everything after XP, which is now over a decade old), *provided that you are using standards mode*.

    If you’re sending the X-UA-Compat headers to get around the fact that other pages on your site break in IE standards mode, this won’t work terribly well… You’ll have two choices then: 1) Emit the proper X-UA-Compat header for the page you’re using this on (or, better, only emit it for the pages which actually need it); or, 2) use a canvas polyfill.

    If you’re aiming for IE < 9 these days, you still will need a canvas polyfill. IE 8 was released over 3 years ago. At that point, canvas was still something of a brand new toy and even related patents were still unsettled just a year prior to IE 8's release (it could be argued that they're still unsettled, until the W3C makes a formal HTML5 recommendation). IE's just a more "stable" target in that it doesn't get rapid-fire major version increases like certain other browsers, and web developers need to keep that in mind (preaching to the choir, yes).

    So, basically, if you want to target any current and future IE versions (and pretty much any browser released in the past couple years), this will work as-is. If you want it to work on older browsers, including IE 8 and earlier, you will need to use a canvas polyfill.


  • PuZZleDucK
    Posted on

    PuZZleDucK PuZZleDucK

    Reply Author

    Hey there Ashley,
    I’m all for M$ bashing when it is warranted, but this is simply not one of those times. HTML5 is a cutting edge standard, it’s the next version not the current version of HTML.
    IE 10 actually runs the demo fine: http://www.youtube.com/watch?v=qW-eiujFBN0&feature=youtu.be

    I bet if you tried to run the demo in FF 3.5 or chrome 6 you’d get the same results. If you want bleeding edge HTML to work use a bleeding edge browser.


  • Luckman R
    Posted on

    Luckman R Luckman R

    Reply Author

    works well on firefox 7.
    Perfect


  • Ashley Andrien
    Posted on

    Ashley Andrien Ashley Andrien

    Reply Author

    Is it possible to make multiple canvas objects with this effect on a page? I wanted to use it as a background behind buttons…the only problem i run into is substituting getElementsByTagName with getElementById in the javascript.


  • bachtiar
    Posted on

    bachtiar bachtiar

    Reply Author

    @stefano todaro , of course it’s possible. Check my webite’s source code you’ll find the way to modified this.


  • Stefano Todaro
    Posted on

    Stefano Todaro Stefano Todaro

    Reply Author

    Great background, I used it in my web site.
    Is it possible to change default colors?


  • Steve
    Posted on

    Steve Steve

    Reply Author

    works in ie9


  • Karen
    Posted on

    Karen Karen

    Reply Author

    can you use this in internet explorer 9?
    and if you are using it currently in firefox and chrome – what will show in IE8?


  • abel
    Posted on

    abel abel

    Reply Author

    awesomeness didn’t have many names until it found this gradient demo.


  • Tommy
    Posted on

    Tommy Tommy

    Reply Author

    Is it possible to have a gradient background that gradually changes state over time rather than being ruled by the mouse over property?