SOURCE

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");   
// 上传图片后的回调，用于将上传的图片信息赋给 Image() 对象
    function uploadImg() {
        var file = this.files[0];
        if(file.type.indexOf("image") > -1) {
            var reader =new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
            	drawImg(this.result)
            }
        } else {
          clearImg()
        }
    }

    // 绘制图片至画布
    function drawImg(src){
        var img = new Image();
        img.src = src;
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0)
        }
    }
  // 清空画布
	function clearImg(){
    ctx.clearRect(0,0,canvas.width, canvas.height);
    canvas.width = 300;
    canvas.height= 100;
    ctx.beginPath();
    ctx.font="20px Georgia";
    ctx.fillText('file type error', 0, 50);
  }
document.querySelector("#upload").addEventListener("change", uploadImg)

<input type="file" id="upload">
<canvas id="canvas"></canvas>