need help while creating a simple game

hello
so... this is the first time i used canvas and i really need help solving this one

this is what the game should look like :
http://imgur.com/a/G3RsB

and this is how it ended:
http://imgur.com/a/uCqlu

this is my html code:
<!DOCTYPE html>
<html>
<head>
<title>EXercice 5</title>
<meta charset="utf-8">
<script src="it.js" type="text/javascript"></script>
<link rel = "stylesheet" type = "text/css" href = "css.css" />
</head>
<body>
<p>détection du déplacement.(deplacer l'image) </p>
<h2> les billes dans les boites </h2>
<p id="info"></p>
<div id="boite1"></div>
<div id="boite2"></div>
<canvas id="billes1" width="40" height="40" draggable="true">
Texte pour les navigateur qui ne supportent pas canvas
</canvas>
<canvas id="billes2" width="40" height="40" draggable="true">
Texte pour les navigateur qui ne supportent pas canvas
</canvas>
<canvas id="billes3" width="40" height="40" draggable="true">
Texte pour les navigateur qui ne supportent pas canvas
</canvas>
<canvas id="billes4" width="40" height="40" draggable="true">
Texte pour les navigateur qui ne supportent pas canvas
</canvas>
<canvas id="billes5" width="40" height="40" draggable="true">
Texte pour les navigateur qui ne supportent pas canvas
</canvas>
</style>
<img id="image1" src="logo.png" draggable="true" ondragstart="fonction_dragstart(event)" width="100" height="100">
<p id="info"><p>
<img id="image1" src="logoo.png" draggable="true" width="100" height="100">
</body>
</html>

my javascript code:
var image = document.getElementById('image1')
image.addEventListener('dragstart',fonction_dragst art,false);
image;addEventListener('dragend',fonction_dragend, false);
function fonction_dragstart(ev){
var id = ev.target.id;
document.getElementById('info').innerHTML="deplace ment de"+id;
this.style.opacity=0.2;
this.style.borderStyle='dashed';
ev.dataTransfer.setData("Text",ev.target.id);
}
function fonction_dragend(ev){
var id = ev.target.id;
document.getElementById('info').innerHTML="fin de deplacement de"+id;
this.style.opacity=1;
this.style.borderStyle='none';
}
var cible = document.getElementById('cible')
cible.addEventListener('dragover',fonction_dragove r,false);
cible.addEventListener('drop',fonction_drop,false) ;
function fonction_dragover(ev){
ev.preventDefault();
}
function fonction_drop(ev){
var data=ev.dataTransfer.getData("Text");
ev.target.apprendChild(document.getElementById(dat a));
}

and my css

#boite1, #boite2 {
display: :inline-block;
width: 200px;height: 200px;border: 1px solid #aaaaaa;
}

been 2 weeks trying to solve this

need help while creating a simple game