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:
  1. <body>
  2. <div><h3>Image Fading Using HTML5</h3>
  3. <input type="button" id="fade_button"value="Fade Button" />
  4. </div>
  5. <canvas id='mycanvas' width='650' height='450'></canvas>
  6. <script src='fadescript.js' type="text/javascript">
  7. </script>
  8. </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:
  1. function incvisiblity(imgd, steps) {
  2. var x, dx, nxt, l = imgd.data.length;
  3. for (var a = 3; a < l; a += 4) {
  4. x = imgdnewcanvas.data[a];
  5. if (x > 0) {
  6. dx = imgd.data[a];
  7. nxt = Math.ceil(x / steps);
  8. if (dx + nxt <= x) {
  9. imgd.data[a] += nxt;
  10. } else {
  11. imgd.data[a] = x;
  12. }
  13. }
  14. }
  15. }
  17. function startfade(context, imgd, steps, millisecondsPerStep) {
  18. var y = 0;
  19. for (var a = 3; a < imgd.data.length; a += 4) {
  20. imgd.data[a] = 0;
  21. }
  22. gap = setInterval(function() {
  23. y++;
  24. if (y > steps) {
  25. clearInterval(gap);
  26. } else {
  27. incvisiblity(imgd, steps);
  28. context.putImageData(imgd, 0, 0);
  29. }
  30. }, millisecondsPerStep);
Step 3: Now we apply CSS in the Head section of the HTML for looks and formatting of our HTML page, like this:
  1. <head>
  2. <title>Image Fading</title>
  3. <style>
  4. body
  5. {background:white;
  6. border:black;
  7. cursor:crosshair
  8. }
  9. #mycanvas
  10. {background:white
  11. }
  12. </style>
  13. </head>
The complete code looks like this:
  1. //HTML code
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Image Fading</title>
  5. <style>
  6. body
  7. {background:white;
  8. border:black;
  9. cursor:crosshair
  10. }
  11. #mycanvas
  12. {background:white
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div><h3>Image Fading Using HTML5</h3>
  18. <input type="button" id="fade_button"value="Fade Button" />
  19. </div>
  20. <canvas id='mycanvas' width='650' height='450'></canvas>
  21. <script src='fadescript.js' type="text/javascript">
  22. </script>
  23. </body>
  24. </html>
  26. //JavaScript code
  27. var img = new Image(),
  28. mycanvas = document.getElementById('mycanvas'),
  29. context = mycanvas.getContext('2d'),
  30. newcanvas = document.createElement('canvas'),
  31. offscreenContext = newcanvas.getContext('2d'),
  32. fade_button = document.getElementById('fade_button'),
  33. imgd,
  34. gap = null,
  35. imgdnewcanvas;
  36. function incvisiblity(imgd, steps) {
  37. var x,
  38. dx,
  39. nxt,
  40. l = imgd.data.length;
  41. for (var a = 3; a < l; a += 4) {
  42. x = imgdnewcanvas.data[a];
  43. if (x > 0) {
  44. dx = imgd.data[a];
  45. nxt = Math.ceil(x / steps);
  46. if (dx + nxt <= x) {
  47. imgd.data[a] += nxt;
  48. }
  49. else {
  50. imgd.data[a] = x;
  51. }
  52. }
  53. }
  54. }
  55. function startfade(context, imgd, steps, millisecondsPerStep) {
  56. var y = 0;
  57. for (var a = 3; a < imgd.data.length; a += 4) {
  58. imgd.data[a] = 0;
  59. }
  60. gap = setInterval(function () {
  61. y++;
  62. if (y > steps) {
  63. clearInterval(gap);
  64. }
  65. else {
  66. incvisiblity(imgd, steps);
  67. context.putImageData(imgd, 0, 0);
  68. }
  69. }, millisecondsPerStep);
  70. }
  71. fade_button.onclick = function () {
  72. imgdnewcanvas = offscreenContext.getImageData(0, 0, mycanvas.width, mycanvas.height);
  73. startfade(context, offscreenContext.getImageData(0, 0, mycanvas.width, mycanvas.height), 50, 1000 / 60);
  74. };
  75. img.src = 'color.jpg';
  76. img.onload = function () {
  77. newcanvas.width = mycanvas.width;
  78. newcanvas.height = mycanvas.height;
  79. offscreenContext.drawImage(img, 0, 0);
  80. };
Output
fade1
fade2
fade3