Je n'arrive pas à faire bouger mon dessin dans mon Canvas

je programme un truc assez simple : un canvas avec un fond et une image que j'ai importé, seulement j'aimerai que cette image bouge de droite a gauche avec les fleches du clavier
mon code :
<script>

window.addEventListener("load",initialisation,false);


var canvas, context, canvas2, ctx, img;
var x=69

function initialisation()
{
alert("page charg? et pr?e ?l'emploi !");
window.addEventListener("keypress",clavier,false)

canvas=document.getElementById("dessin");

context = canvas.getContext("2d");
img = new Image();
img.src = 'hero.png';
img.onload = function(){
context.drawImage(img, x , 50);


}



// le canvas est pr? ?l?mploi et accessible ?Javascript.
alert("dimension du canvas : largeur : "+canvas.width+" hauteur : " +canvas.height);


//texte
context.font="10px Arial";
context.fillStyle="#AE86FF";
context.fillText("petit jeu",100,100);

}
function clavier(evt)
{
if(evt.keyCode==37)
{
context.img(x,50);
x-=5;
context.img(x,50);
}
else if(evt.keyCode==39)
{
context.img(x,50);
x+=5;
context.img(x,50);
}
}
</script>
ps ; mon canvas possède une image de fond instalé dans le style ,normalement ça n'influe pas mais je précise au cas ou
voila , je vous remercie d'avance !