Bon.... vu que je n'aime pas laisser une discussion sans avoir fourni de réponse... voilà :
Tu as oublié 3 choses dans TON code :
1 - Les coordonnées de la souris sont celles du DOCUMENT.. et non celles sur le Canvas...
2 - Tu n'efface pas le précédent rectangle
3 - Tu n'affiche pas le nouveau...
Voici un code qui fait ce que tu demandes....
(Normalement j'aurais du te laisser chercher !!... mais bon..)
A toi maintenant de l'améliorer selon tes besoins.
<html>
<style>
#myDiv{
border-width:1px;
border-style:solid;
border-color:black;
}
</style>
<body>
<script type="text/javascript">
function initialiser(){
console.log("initialisation");
contexte = document.getElementById('monCanvas').getContext('2d')
}
function plateformeludonic(){
contexte.beginPath()
contexte.fillStyle = 'white';
contexte.fillRect(110,101,100,115);
contexte.strokeRect(120,108,30,35);//cadre interieur noir (cadre jaune)
contexte.strokeRect(170,108,30,35);
contexte.strokeRect(120,175,30,35);
contexte.strokeRect(170,175,30,35);
contexte.lineWidth = 1 ;
contexte.stroke();
}
function Affichepion(N){
console.log("Affiche Pion :"+N);
switch (N)
{
case 0 :
posXPJ1 = 128;
posYPJ1 = 115;
break ;
case 1 :
posXPJ1 = 178;
posYPJ1 = 115;
break ;
case 2 :
posXPJ1 = 178;
posYPJ1 = 182;
break ;
case 3 :
posXPJ1 = 127;
posYPJ1 = 182;
break ;
case 4 :
posXPJ1 = 247;
posYPJ1 = 212;
break ;
}
console.log("posXPJ1 =" + posXPJ1);
console.log("posYPJ1 =" + posYPJ1);
}
function getPosXPJ1() {
return posXPJ1;
}
function getPosYPJ1() {
return posYPJ1;
}
function Deplacepion(X,Y) {
console.log("Deplacepion X :"+X + " Y:"+Y);
contexte.beginPath()
contexte.fillStyle = 'yellow';//pion jaune_1
contexte.fillRect(X,Y,15,20);
contexte.strokeRect(X,Y,15,20);
contexte.lineWidth = 1 ;
contexte.stroke();
}
function Bougepion(sX,sY) {
console.log("Bougepion");
console.log (" --- > sX = " + sX + " sY="+sY);
console.log (" --- > getPosXPJ1 = " + getPosXPJ1() + " getPosYPJ1="+getPosYPJ1());
if (sX>=getPosXPJ1() && sX<=getPosXPJ1()+15 && sY>=getPosYPJ1() && sY<=getPosYPJ1()+15){
contexte.clearRect(getPosXPJ1(),getPosYPJ1(),15,20);
Affichepion(3);
Deplacepion(getPosXPJ1(),getPosYPJ1());
}
}
function moveRect(e){
console.log(e);
var x;
var y;
var gcanevas = document.getElementById('monCanvas');
if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= gcanevas.offsetLeft;
y -= gcanevas.offsetTop;
console.log(" x= "+x+" Y="+y);
Bougepion(x,y);
}
</script>
<center>
<div id="myDiv" style="width:400px">
<canvas id='monCanvas' width='200px' height=400px'>
</canvas>
<script type="text/javascript">
initialiser();
plateformeludonic();
Affichepion(0);
Deplacepion(getPosXPJ1(),getPosYPJ1());
document.onclick = moveRect;
</script>
</div>
</center>
</body>
</html>
PS: Merci de penser à marquer la discussion en RESOLU ( lien se trouvant en haut... sous le titre de ta question).