javascriptのonclickイベントでcanvasに色を塗る練習

<canvas id="e_click" width="250" height="250" style="background-color:#ccc;"></canvas>

<script>
function e_click() {
    var cs = document.getElementById('e_click');
    var ctx = cs.getContext('2d');
    var w = cs.width;
    var h = cs.height;
    var x = 0;
    var y = 0;

    function onClick(e) {
        /*
         * rectでcanvasの絶対座標位置を取得し、
         * クリック座標であるe.clientX,e.clientYからその分を引く
         * ※クリック座標はdocumentからの位置を返すため
         * ※rectはスクロール量によって値が変わるので、onClick()内でつど定義
         */
        var rect = e.target.getBoundingClientRect();
        x = e.clientX - rect.left;
        y = e.clientY - rect.top;

        draw();
    }

    function draw() {
        //
        //ctx.clearRect(0, 0, w, h);
        ctx.fillRect(x, y, 10, 10);
    }

    //マウスでクリックされたらonClick関数を実行する
    cs.addEventListener('click', onClick, false);
}

//関数を実行
e_click();
</script>

function e_click() {
    var cs = document.getElementById('e_click');
    var ctx = cs.getContext('2d');
    var w = cs.width;
    var h = cs.height;

    //ダブルクリックされたらcanvas画面をリセット
    function onClick2() {
        ctx.clearRect(0, 0, w, h);
    }

    //ダブルクリックされたらonClick2を実行
    cs.addEventListener('dblclick', onClick2, false);
}

e_click();