<body>
<div style="height:500px;width:300px;border:1px solid red;float:left">
<img src="1.jpg" style="height:100px;width:100px;">
</div>
<canvas id="canvas"height="500px" width="500px" style="border:2px solid red"></canvas>
<div style=" clear: both"></div>
<script>
var ele=document.getElementById('canvas');
var canvas=ele.getContext('2d');
ele.ondragover=function(e){
e.preventDefault();
};
ele.ondrop=function(e) {
var src = e.dataTransfer.getData("text");
var img = new Image();
img.src = src;
img.onload = function () {
canvas.drawImage(img, e.offsetX-50, e.offsetY-50,100,100);
}
};
</script>
</body>
