HTML5 canvasに画像をアップロードする方法

質問

現在、私は http://paperjs.org を使用して HTML5 のキャンバス描画アプリを作成しています。ユーザーがキャンバスに画像をアップロードできるようにしたいです。ログインとサインアップが必要なことは分かっていますが、もっと簡単な方法はないでしょうか？HTML5のドラッグ＆ドロップアップロードは見たことがあります。

どのように解決するのですか？

キャンバスから画像をアップロードするのではなく、キャンバスに画像を読み込むということでしょうか。

ここにあるキャンバスの記事をすべて読むのがよいでしょう。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

しかし、基本的にやりたいことは、javascriptで画像を作成し、image.src = にファイルの場所が何であれ設定することです。ユーザー側で画像を読み込む場合は、ファイルシステムAPIを使用することになります。

簡単な例をここにまとめてみました。 http://jsfiddle.net/influenztial/qy7h5/

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}