[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 скриптов (файлов) связанных - не хватит мозгов на это. Буду благодарен если кто-нибудь объяснить как правильно делать или в чём ошибка, я уверен, что и сам скрипт смогу написать, по подсказке. Если уж нельзя без примера...