Creating Image Fading Using HTML5

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><inputtype="button"id="fade_button"value="Fade Button"/></div><canvasid='mycanvas'width='650'height='450'></canvas><scriptsrc='fadescript.js'type="text/javascript"></script></body>

Step 2 : Then we use JavaScript to define the functionality. We use the invisiblity function to increase the visiblity 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:

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>