Canvas rect 習作

canvasの習作として、背景色を塗り替えるモックを作成してみました。rectを描きまくってます。
まずは兎に角動くものをつくったので、ロジックとレンダリングがわかれてません。追々切り離していければと思います。

DEMO

JavaScript

(function(win, doc) {
    
    "use strict";
    
    var main = doc.getElementById("main"),
        ctx = main.getContext("2d"),
        i = 0,
        HEIGHT = win.innerHeight,
        SIZE = 10,
        INTERVAL = 10;
    
    main.width = win.innerWidth;
    main.height = HEIGHT;
    
    build(0);
    
    function build(i) {
        var height = HEIGHT / SIZE,
            max = (i + 1 < height) ? (i + 1) : height;
        
        (function setRect(j) {
            if (j < max) {
                ctx.rect((i -j) * SIZE, j * SIZE, SIZE, SIZE);
                ctx.fillStyle = "#dc5252";
                ctx.fill();
                setTimeout(function() {
                    setRect(++j);
                }, INTERVAL);
            } else {
                if ((i - HEIGHT / SIZE) * SIZE < win.innerWidth) {
                    build(++i);
                }
            }
        })(0);
    }
    
})(this, document);