Secuencia de Imagenes en Canvas

[ManuelVR461]

Holas amigos del Foro. estoy un poco nuevo en el asunto de canvas html5 y deseo que alguien pueda ayudarme a solucionar un pequenio inconveniente. tengo una serie de imagenes con numeros tipo .png que quiero mostrar uno atras de otro, es decir aparece uno, dura cierto segundo cuando el otro aparece y lo desplaza para durar el mismo tiempo que el anterior y el que es desplazado deberia desaparecer.. mi problema es que lo mas basico que es mostrar uno y durar un tiempo para mostrar otro no sucede porque cuando hago los ciclos del array de imagenes solo queda el primero y ele resto no. y eso que en cada secuencia creo el objeto imagen con el path respectivo. les agradeceria alquien pudiera ayudarme...

Código (javascript) [Seleccionar] Expandir

var canvas = document.getElementById('sorteo');
   if (canvas.getContext) {
       var ctx = canvas.getContext('2d');
       var width = canvas.width;
       var height = canvas.height;
       var y=0;x=1;z=0;
       var imagenes = "<?php echo $cadena-imagenes; ?>";
       var todasimagenes = imagenes.split("-");
       
       var Images= [];
       
       
       function cargarimagen(src) {
           var image = new Image();
           image.src = src;
           console.log(src);
           dibujar(image);            
           return;
       }
       
       function dibujar(image){
           if(x < 11){
               image.onload =function(){
                   ctx.drawImage(image, 175, (205+(x*8)), (50+(x*8)), (50+(x*8)));
               };
               x++;
               window.setInterval(function(){
                   ctx.clearRect(0,0,canvas.width,canvas.height);
                   dibujar(image);
               }, 1000);
           }else{
               y++;
               window.setInterval(function(){
                   cargarsecuencia();
               }, 1000);
               
               return;
           }
           
       }
       

       var cargarsecuencia = function () {
           if( y < Images.length){
               cargarimagen(Images[y]);
           }
       };

       var init = function () {
           todasimagenes.forEach(function(b){
               Images[z++]='./images/fotos/' + b+ '.png';
           });
           cargarsecuencia();
       };

       window.addEventListener('load', init);
   }