JavaScript Анимация Холста с setInterval

У меня проблема с моим кодом, он не работает, и я не вижу ошибок, которые, по моему мнению, ошибочны, потому что многие гнездования и я установили скобки в неправильном месте. Функция из кода - это анимация в анимации - это некоторые изображения в верхней части холста, и если эти изображения медленно появлялись сверху вниз, как watterfall.i надеюсь, вы сможете понять мое объяснение.

console.log("hey");
            var canvas = document.getElementById('canvas');
                var ctx = canvas.getContext('2d'); //ctx = contex
                var img = new Image();
                img.src="../img/cookie.png";

            canvas.width = canvas.scrollWidth;
            canvas.height = canvas.scrollHeight;


img.onload = function() {
                console.log("Loaded image")
                var add = 10;
                var id  = setInterval(function () {

                        if (add == 500) {

                                    ctx.clearRect(0, 0, canvas.width, canvas.height)

                                    ctx.beginPath();
                                    ctx.rect(0, 0, 1000, 1000);
                                    ctx.fillStyle = "lightblue";
                                    ctx.fill();

                                    ctx.drawImage(img,0 , 0, 100, 100);
                                    ctx.drawImage(img,100,0, 100, 100);
                                    ctx.drawImage(img,200,0, 100, 100);
                                    ctx.drawImage(img,300,0, 100, 100);
                                    ctx.drawImage(img,400,0, 100, 100);
                                    ctx.drawImage(img,500,0, 100, 100);
                                    ctx.drawImage(img,600,0, 100, 100);
                                    ctx.drawImage(img,700,0, 100, 100);

        } else {

                ctx.clearRect(0, 0, canvas.width, canvas.height)

                ctx.beginPath();
                ctx.rect(0, 0, 1000, 1000);
                ctx.fillStyle = "lightblue";
                ctx.fill();

                ctx.drawImage(img,0 , add, 100, 100);
                ctx.drawImage(img,100,add, 100, 100);
                ctx.drawImage(img,200,add, 100, 100);
                ctx.drawImage(img,300,add, 100, 100);
                ctx.drawImage(img,400,add, 100, 100);
                ctx.drawImage(img,500,add, 100, 100);
                ctx.drawImage(img,600,add, 100, 100);
                ctx.drawImage(img,700,add, 100, 100);

                add++;
            }
        }, 10)
  }

PS: извините, если некоторые ошибки в моем тексте, но я все еще ученик. : D

PPS: спасибо за помощь.

EDIT: Теперь это помогает благодарить за помощь. ** EDit2: ** теперь у меня есть более сложная проблема, код будет только эксплицировать один раз, но он должен полностью отвлечься, если кто-нибудь может мне помочь, я очень danbar.