我想上传网页中的图像。代码中没有错误，但我仍然无法在网页中上传图像并在画布中显示。图像被上传到网页中，但它没有显示在我创建的画布中。请帮我找出我的代码出了什么问题？这是hole html页面的代码。
function upload(){
var dd=document.getElementById('can');
var filein=document.getElementById('finp');
var img = new SimpleImage(filein);
img.drawTo(dd);
}
function docolor(){
var dd1=document.getElementById("can2");
var colin=document.getElementById("clr");
var col=colin.value;
dd1.style.backgroundColor=col;
}<html>
<head>
<script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"></script>
</head>
<body>
<h3>HTML code for canvas and upload button</h3>
<canvas id="can">
</canvas>
<h3>Load Image</h3>
<input type="file" multiple="false" accept="image/*" id="finp" onclick="upload()" >
</body>
</html>我认为HTML元素和JS代码中使用的ID不匹配。
function upload(){
var dd=document.getElementById('can');
var filein=document.getElementById('finp');
var img = new SimpleImage(filein);
img.drawTo(dd);
}
function docolor(){
var dd1=document.getElementById("can2");
var colin=document.getElementById("clr");
var col=colin.value;
dd1.style.backgroundColor=col;
}<script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js" ></script>
<canvas id='can' class='canvasRoundCorders'></canvas>
<input id='finp' type='file' accept='image/*' onchange="upload()">