Canvasでベジェ曲線を描く

俄然Canvas勉強中です。
Canvasでベジェ曲線を描く時はコンテキストの quadraticCurveTo メソッドをつかいます。
今回は無意味にアニメーションをつけてみました。

DEMO

JavaScript

(function(win, doc) {

    "use strict";
    
    var canvas = doc.querySelector("#canvas"),
        ctx = canvas.getContext("2d"),
        isAdd = true,
        i = 0;
    
    adjustSize();
    setInterval(move, 1000 / 18);
    setInterval(render, 1000 / 30);
    
    function adjustSize() {
        canvas.width = win.innerWidth;
        canvas.height = win.innerHeight;
    }
    
    function move() {
        if (i >= 12) {
            isAdd = false;
        }
        
        if (i === 1 && !isAdd) {
            isAdd = true;
        }

        if (isAdd) {
            ++i;
        } else {
            --i;
        }
    }
    
    function render() {
        adjustSize();
        
        ctx.fillStyle = "#000";
        ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.quadraticCurveTo(canvas.width / 2, canvas.height / i, canvas.width, 0);
        ctx.closePath();
        
        ctx.fill()
    }
    
    
    console.log(canvas.width);
    
})(this, document);