title: image slideshow using canvas HTML5
body: <p>I am trying to create an image slideshow using HTML5 canvas and a little bit of javascript. My problem is the following: the slideshow works with the fading effect that I want for the first passing through the image set, and after that, the images are drawn into the canvas without the effect, and keeps going like that. </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;canvas id="showCanvas" width='600' height='400'&gt;Canvas Not Supported&lt;/canvas&gt;
  </code></pre>
  
  <p>JAVASCRIPT: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
          var imagePaths = ["images/j0149014.jpg","images/j0149024.jpg","images/j0149029.jpg"];
          var showCanvas = null;
          var showCanvasCtx = null;
          var img = document.createElement("img");
          var currentImage = 0;
          var revealTimer;
  
          window.onload = function (){
              showCanvas = document.getElementById('showCanvas');
              showCanvasCtx = showCanvas.getContext('2d');
              img.setAttribute('width','600');
              img.setAttribute('height','400');
              setInterval(switchImage,3000);
          }
  
          function switchImage() {
  
              img.setAttribute('src',imagePaths[currentImage++]);
              img.onload = function(){
                  if(currentImage &gt;= imagePaths.length)
                      currentImage = 0;
                  showCanvasCtx.globalAlpha = 0.0;
                  revealTimer = setInterval(revealImage,100);
              }
          }
  
          function revealImage() {
              showCanvasCtx.drawImage(img,0,0,600,400);
              showCanvasCtx.globalAlpha += 0.1;
              if(showCanvasCtx.globalAlpha &gt;= 1.0)
                  clearInterval(revealTimer);
          }
  
  &lt;/script&gt;
  </code></pre>