Estou tentando construir em cima deste ótimo scriptAqui que foi respondida por Phrogz.

O problema é que a animação não será reproduzida até que todas as imagens tenham sido armazenadas no navegador. Portanto, na primeira carga, não será reproduzido. Apenas em uma recarga.

O ponto de tentar fazê-lo é tentar fornecer uma solução alternativa para que uma animação seja reproduzida automaticamente, uma vez que esse recurso não funciona nos navegadores do iOS.

Aqui está o código que estou usando:

         function draw() { 
            var imgNumber = 1;
            var lastImgNumber = 121;

            var ctx = canvas.getContext('2d');
            var img = new Image;
            img.onload = function(){
            ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
            ctx.drawImage( img, 0, 0 );
            };
            var timer = setInterval( function(){
              if (imgNumber>lastImgNumber){
                clearInterval( timer );
              }
             else{
                img.src = "jpg_80/t5_"+( imgNumber++ )+".jpg";
              }
            }, 1000/24 ); //Draw at 24 frames per second
          }

Eu tentei adicionar isso antes da tag body de fechamento:

                 window.onload = draw; 

No entanto, acredito que o código teria que ser alterado dentro da função draw (). Algum lugar na função setInterval?