Canvasで画像を重ね合わせて描画した要素をそのまま画像として生成したい

こちらのページを参考にhtml5のFile APIを使ってドラッグ＆ドロップし、そこに放り込まれた画像をベース画像とし、重ねレイヤーとしての画像を1枚に合わせてcanvasで描画することまではできましたが、
こちらで描画されたcanvas要素をそのまま画像ファイルとしてcaptureImage要素内に出力したいのですが、画像としての生成手順がわかりません。

下記のコードの修正点のご教授宜しくお願い致します。

<div id="dropZone">画像ファイルを<br>ドロップ</div>
<div id="captureImage">
<canvas id="imageCanvas"></canvas>
</div>

#dropZone{
display: block;
border: 2px dashed #bbb;
border-radius: 5px;
color: #bbb;
padding: 25px;
text-align: center;
margin: 10px auto 5px;
font-size: 12px;
-khtml-user-drag: element;
}

#captureImage{
width: 500px;
height: 500px;
}

    function handleFileSlice(evt) {

        evt.stopPropagation();
        evt.preventDefault();
        var files = evt.dataTransfer.files;
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {

            //ファイルの形式を確認
            if (!f.type.match('image.*')) {
                alert("このファイルは画像ファイルではありません");
                continue;
            }

            var file = f;

            //重ね合わせる画像パスを配列に格納
            var fileArray = [URL.createObjectURL(file), "icon.png"];
            var xywh = [{x: 0, y: 0, w: 500, h: 500}, {x: 10, y: 10, w: 100, h: 100}];
            var numFiles = fileArray.length;
            var loadedCount = 0;
            var imageObjectArray = [];


            var canvas = document.getElementById('imageCanvas');
            var ctx = canvas.getContext('2d');


        function loadImages(){
                var imgObj = new Image();
                imgObj.addEventListener('load',
                    function(){
                        loadedCount++;
                        imageObjectArray.push(imgObj);
                        if(numFiles === loadedCount){
                            drawImage();
                        }else{
                            loadImages();
                        }
                    },
                    false
                );

                imgObj.src = fileArray[imageObjectArray.length];
                $("#captureImage").append(imgObj[1]);
            }
            function drawImage(){
                canvas.width = 500;
                canvas.height = 500;
                for(var i in imageObjectArray){
                    ctx.drawImage(imageObjectArray[i], xywh[i]['x'], xywh[i]['y'], xywh[i]['w'], xywh[i]['h']);
                    imageObjectArray[i] = null;
                }
            }
            loadImages();            
        };


    };

    //画像ファイルのドラッグ＆ドロップ設定
    function handleDragOver(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy';
    };
    var resizeZone = document.getElementById('dropZone');
    resizeZone.addEventListener('dragover', handleDragOver, false);
    resizeZone.addEventListener('drop', handleFileSlice, false);        
    resizeZone.addEventListener('dragenter', handleDragOver, false);

※できれば生成される画像のファイル名も元のドロップファイル名を引き継いで出力できれば理想です。