Creating Image Fading Using HTML5

Introduction

In this article, we learn how to create image fading using HTML5. We use the canvas element of HTML5 and define its id, width and height attributes. When the user clicks on the button, the image fades.

Step 1 : First we define the body of the HTML using a canvas element, like this:

<body>
<div><h3>Image Fading Using HTML5</h3>
<input type="button" id="fade_button"value="Fade Button" />
</div>
<canvas id='mycanvas' width='650' height='450'></canvas>
<script src='fadescript.js' type="text/javascript">
</script>
</body>

Step 2: Then we use JavaScript to define the functionality. We use the invisibility function to increase the visibility of the image; the startfade method is used to do the image fading. We create the image as an offscrean canvas and then pixels are captured from that canvas, like this:

function incvisiblity(imgd, steps) {
var x, dx, nxt, l = imgd.data.length;
for (var a = 3; a < l; a += 4) {
x = imgdnewcanvas.data[a];
if (x > 0) {
dx = imgd.data[a];
nxt = Math.ceil(x / steps);
if (dx + nxt <= x) {
imgd.data[a] += nxt;
} else {
imgd.data[a] = x;
}
}
}
}
function startfade(context, imgd, steps, millisecondsPerStep) {
var y = 0;
for (var a = 3; a < imgd.data.length; a += 4) {
imgd.data[a] = 0;
}
gap = setInterval(function() {
y++;
if (y > steps) {
clearInterval(gap);
} else {
incvisiblity(imgd, steps);
context.putImageData(imgd, 0, 0);
}
}, millisecondsPerStep);

Step 3: Now we apply CSS in the Head section of the HTML for looks and formatting of our HTML page, like this:

<head>
<title>Image Fading</title>
<style>
body
{background:white;
border:black;
cursor:crosshair
}
#mycanvas
{background:white
}
</style>
</head>

The complete code looks like this:

//HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Fading</title>
<style>
body
{background:white;
border:black;
cursor:crosshair
}
#mycanvas
{background:white
}
</style>
</head>
<body>
<div><h3>Image Fading Using HTML5</h3>
<input type="button" id="fade_button"value="Fade Button" />
</div>
<canvas id='mycanvas' width='650' height='450'></canvas>
<script src='fadescript.js' type="text/javascript">
</script>
</body>
</html>
//JavaScript code
var img = new Image(),
mycanvas = document.getElementById('mycanvas'),
context = mycanvas.getContext('2d'),
newcanvas = document.createElement('canvas'),
offscreenContext = newcanvas.getContext('2d'),
fade_button = document.getElementById('fade_button'),
imgd,
gap = null,
imgdnewcanvas;
function incvisiblity(imgd, steps) {
var x,
dx,
nxt,
l = imgd.data.length;
for (var a = 3; a < l; a += 4) {
x = imgdnewcanvas.data[a];
if (x > 0) {
dx = imgd.data[a];
nxt = Math.ceil(x / steps);
if (dx + nxt <= x) {
imgd.data[a] += nxt;
}
else {
imgd.data[a] = x;
}
}
}
}
function startfade(context, imgd, steps, millisecondsPerStep) {
var y = 0;
for (var a = 3; a < imgd.data.length; a += 4) {
imgd.data[a] = 0;
}
gap = setInterval(function () {
y++;
if (y > steps) {
clearInterval(gap);
}
else {
incvisiblity(imgd, steps);
context.putImageData(imgd, 0, 0);
}
}, millisecondsPerStep);
}
fade_button.onclick = function () {
imgdnewcanvas = offscreenContext.getImageData(0, 0, mycanvas.width, mycanvas.height);
startfade(context, offscreenContext.getImageData(0, 0, mycanvas.width, mycanvas.height), 50, 1000 / 60);
};
img.src = 'color.jpg';
img.onload = function () {
newcanvas.width = mycanvas.width;
newcanvas.height = mycanvas.height;
offscreenContext.drawImage(img, 0, 0);
};

Output