Cоздание анимации на JS и Canvas
 

Не могу сделать анимацию.. вроде все правильно! Код полностью ниже:
подскажите почему не работает!?:-?

<canvas id="area" width="500" height="300">
</canvas>
<script type="text/javascript">
window.onload = function main(){
var img = new Image();
var img2;
var i=0; var j=0;
var a= new Array ('TxtLv01-01.png','TxtLv01-02.png','TxtLv01-03.png');

function main2(){
img2 = document.getElementById("ci").getContext("2d");

for (j=0;j<=2;j++)
{setTimeout(function(){ if (i==2) i=0;img.src = a[i]; img2.drawImage(img, 150, 150, 300, 300);
i++;
},10);

if (j==2) j=0;
}
}

main2();
}


</script>

мы должны сами догадаться что вы делаете?

Кароче! Заношу одно изображение! а затем запускаю цикл с setTimeout в котором переставляю картинки ! Но дело в том, что если убрать цикл и счетчик, вручную он переставляет картинки.. а автоматизировать никак не могу! =(

все разобрался сам

как вариант:

<script type="text/javascript">
(function(i) {
      window.setInterval(
          function() {
              var element = document.getElementById('img');
                  images = ['http://png-2.findicons.com/files/icons/1982/social_me/48/google.png',
                            'http://png-5.findicons.com/files/icons/1982/social_me/48/twitter.png',
                            'http://png-4.findicons.com/files/icons/1982/social_me/48/facebook.png'],
              j = images.length;
              ++i < j ? element.src = images[i] : i = -1;
    }, 1500);
}(-1));
</script>

<img src="http://png-4.findicons.com/files/icons/1982/social_me/48/facebook.png" alt="" id="img" />

Анимацию получилось сделать! только вот теперь другая проблема!
Если делать через канвас то на одном изображении картинки меняються с одинаковым интервалом.. происходит разрыв кадров и естественное переодическое исчезновение)) XD