javascript - image slideshow using canvas HTML5 -

i trying create image slideshow using html5 canvas , little bit of javascript. problem following: slideshow works fading effect want first passing through image set, , after that, images drawn canvas without effect, , keeps going that.

html:

<canvas id="showcanvas" width='600' height='400'>canvas not supported</canvas> 

javascript:

<script type="text/javascript">          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 >= 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 >= 1.0)                 clearinterval(revealtimer);         }  </script> 

there several reasons fading not working expected.

don't use ctx.globalalpha maths operations

ctx.globalalpha not number, or string representing javascript number. css alpha value , should not referenced calculations.

why?

if(ctx.globalalpha >= 1){ //is problem never happens 

globalalpha css alpha value. invalid css values not allowed ctx.globalalpha never greater 1 invalid alpha value

the css alpha value not floating point value, result of bit of manipulation resulting in incorrect results mathematical operations.

your alpha goes 0.999999 (thereabouts) add 0.1 results in invalid alpha. invalid alpha not allowed globalalpha value not changed. stays @ 0.99999 , interval never canceled.

thus every time change img new src drawn still running interval timers.

store alpha in javascript variable , use set alpha , test when >= 1 rather use css alpha string in ctx.globalalpha

canvas rendering cumulative

drawing white on canvas alpha @ 0.5 results in gray pixel, draw again without clearing canvas , new pixel gray plus white 0.5. second render results in white, not gray. 0.5 + 0.5 = 1;

you drawing same image on top of self. first alpha 0.1 pixels (10%) alpha 0.2 adds 20% resulting in image pixels @ 30%, 0.3 60% , 0.4 100%. when alpha @ 0.4 image rendered.

you need keep 2 copies of images. previous image , new image. draw previous image @ alpha = 1 , next @ required alpha (if no previous image clear canvas)

that should solve problems having.