canvas上にアップロードした画像を表示する方法

フロント側の技術を勉強中の者です。初心者です。

canvasを使ってお絵描きアプリを作っているのですが、
canvasの領域に、アップロードした画像を表示するにはどうしたらいいでしょうか？

全然分からないながら一応試してみたのは、
<input type="file">でアップして、img.src = $(this).val();でsrcを指定し、
.drawImageで描けるかなと思ったのですが、
「Failed to load resource: net::ERR_FILE_NOT_FOUND」となり、
srcが指定できてなく失敗しています。

※下記のようなコードです。

html
1<body>
2    <h1>canvasに画像をアップロード</h1>
3    <canvas id="drowarea" width="500" height="300" style="border:1px solid blue;"></canvas>
4    
5    <input type="file" id="pic_btn" accept="image/*">
6    
7    <script type="text/javascript">
8        $(function(){
9            var can = document.getElementById('drowarea'); 
10            var context = can.getContext("2d"); 
11            
12            $("pic_btn").on("click",function(){
13                var img = new Image();
14                img.src = $(this).val();
15                context.drawImage(img,20,20,50,50)
16            });
17        });
18    </script>
19</body>