sperm

<!DOCTYPE HTML>
<html>
<head>
<style>
.drop{
    margin-left:20px;
    padding:10px;
}
.hinhanh{
    margin:5px;
}
div>img{
    float:right;
}
canvas>img{
height:100px;
width:100px;
}
</style>
<script>

function cvtest (canvas, imgo, x, y) {

    var ctx = canvas.getContext("2d");
    var img = document.getElementById(imgo);
   ctx.drawImage(img, x, y, 150, 69);
}
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var x = ev.clientX - 252 - 75;
    var y = ev.clientY - 10 - 35;
    cvtest(ev.target, data, x, y);
    <!-- ev.target.appendChild(document.getElementById(data)); -->
}
</script>
</head>
<body>


<div style="height:800px;width:200px;border:1px solid black;padding:10px;float:left" ondrop="drop(event)" ondragover="allowDrop(event)">

<img class="hinhanh" id="1" src="hinh.png" draggable="true" ondragstart="drag(event)"  width="150" height="69" onclick="alert('Hello! I am an alert box!')">
<img class="hinhanh" id="2"  src="hinh.png" draggable="true" ondragstart="drag(event)" width="150" height="69" onclick="alert('Hello! I am an alert box!')">
<img class="hinhanh" id="3"  src="hinh.png" draggable="true" ondragstart="drag(event)" width="150" height="69" onclick="alert('Hello! I am an alert box!')">
<img class="hinhanh" id="4"  src="hinh.png" draggable="true" ondragstart="drag(event)" width="150" height="69" onclick="alert('Hello! I am an alert box!')">


 </div>

 <canvas
 class="drop" ondrop="drop(event)" ondragover="allowDrop(event)" width="800" height="900" style="border:1px solid black;float:left;width:500px;height:800px"></canvas>

</body>
</html>