Почему рисуется только один прямоугольник циклом?

[drakulawz]

Здравствуйте!
Рисую прямоугольники циклом, должно выйти 3 ряда по 3, но получаю один.
Есть вот такой скрипт:

$(document).ready(function () {
    cnv = document.getElementById('canvas');
    ctx = cnv.getContext('2d');
    width = cnv.width;
    height = cnv.height;

    var fillAll = function (color) {
        ctx.fillStyle = '#ccc';
        ctx.fillRect(0, 0, width, height);
    };

    var strkRect = function (x, y, w, h, color) {
        ctx.strokeStyle = color;
        ctx.strokeWidth = 2;
        ctx.strokeRect(x, y, w, h);
    };

    var area = {
        x: 0,
        y: 0,
        width: 100,
        height: 100,
        color: 'white',

        draw: function () {
            strkRect(this.x, this.y, this.width, this.height, this.color);
        },

        init: function (x, y, w, h) {
            this.x = x;
            this.y = y;
            this.width = w;
            this.height = h;
        }
    };

    for (var a1 = 0; a1 < 3; a1++) {
        for (var a2 = 0; a2 < 3; a2++) {
            var dW = Math.ceil(width / 3),
                dY = Math.ceil(height / 3);
            area.init(dW * a1, dY * a2, dW, dY);
        }
    };

    setInterval(function () {
        fillAll();
        area.draw();
    }, 1000 / 60);
});

На странице я вижу только один прямоугольник в конце канваса, как будто бы отрисовало все и стёрло но оставило последний.
Подскажите, может я не правильно цикл применил или не так инициализировать надо? Только прошу, не нужно свои скрипты писать - если возможно. Я их потом не адаптирую, у меня 8 скриптов (файлов) связанных - не хватит мозгов на это. Буду благодарен если кто-нибудь объяснить как правильно делать или в чём ошибка, я уверен, что и сам скрипт смогу написать, по подсказке. Если уж нельзя без примера...

[рони]

На странице я вижу только один прямоугольник

... а откуда взять больше одного?

[рони]

Рисую прямоугольники циклом

нет этого в коде! есть бесконечное рисование последних данных.

[рони]

как правильно делать

убрать setInterval, а его содержимое добавить в цикл.

[drakulawz]

убрать setInterval, а его содержимое добавить в цикл.

Понял! Благодарю за помощь! Но я сделал всё же с сетинтервалом, просто вставил цикл вот так:

setInterval(function () {
        fillAll();
        for (var a1 = 0; a1 < 3; a1++) {
        for (var a2 = 0; a2 < 3; a2++) {
            var dW = Math.ceil(width / 3),
                dY = Math.ceil(height / 3);
            area.init(dW * a1, dY * a2, dW, dY);
            area.draw(dW * a1, dY * a2, dW, dY);
            }
    };
    }, 1000 / 60);

[рони]

drakulawz,
можно узнать для чего вам нужен setInterval в данном случае? зачем нужны строки 1 и 11?

[drakulawz]

для чего вам нужен setInterval в данном случае

В данном случаи он не нужен, но для работы всей программы без него вообще ничего не будет рисоваться. Я же выложил только ту часть кода с которой у меня проблема. и там не setInterval будет, а вот так:

// файл engine.js:
var _renderer = (function () {
    return requestAnimationFrame || webkitRequestAnimationFrame ||
        mozRequestAnimationFrame ||
        oRequestAnimationFrame ||
        msRequestAnimationFrame;
})();

var _engine = function () {
    console.log('The game loop is not initialized!');
};

var startGame = function (game) {
    if (typeof game == 'function') {
        _engine = game;
    }
    gameLoop();
};

var setGame = function (game) {
    if (typeof game == 'function') {
        _engine = game;
    }
};

var gameLoop = function () {
    _engine();
    _renderer(gameLoop);
};

    // файл со скриптом инициализации всех функций script.js:
    var game = function () {
        fillAll('#ccc');
        for (var a1 = 0; a1 < 3; a1++) {
            for (var a2 = 0; a2 < 3; a2++) {
                var dW = Math.ceil(width / 3),
                    dY = Math.ceil(height / 3);
                area.init(dW * a1, dY * a2, dW, dY);
                area.draw(dW * a1, dY * a2, dW, dY);
            }
        };
        target.draw();
        player.move();
        player.draw();
    };

    var menu = function () {
        fillAll('#ccc');
        for (var a1 = 0; a1 < 3; a1++) {
            for (var a2 = 0; a2 < 3; a2++) {
                var dW = Math.ceil(width / 3),
                    dY = Math.ceil(height / 3);
                area.init(dW * a1, dY * a2, dW, dY);
                area.draw(dW * a1, dY * a2, dW, dY);
            }
        };
        player.draw();
        if (isAnyKeyDown()) {
            setGame(game);
        }
    };

    startGame(menu);

Если можно как-то проще сделать то буду рад увидеть это.