KineticJS move shape -

i'm new kineticjs , i'm trying make circle shape move on player input. alerts on event listener firing, circle not moving. ?

here's code:

   (function () {         var stage = new kinetic.stage({             container: "the-container",             width: 800,             height: 600,         });         var layer = new kinetic.layer();          var playercircle = new kinetic.circle({             x: 50,             y: 50,             radius: 10,             fill: "black",         });          var leftarrowcode = 37;         var rightarrowcode = 39;         var uparrowcode = 38;         var downarrowcode = 40;          document.addeventlistener('keydown', function (event) {             if (event.keycode == leftarrowcode) {                 playercircle.move({ x: -10, y: 0 });                 alert("left pressed");             }             if (event.keycode == rightarrowcode) {                 playercircle.move({ x: 10, y: 0 });                 alert("right pressed");             }             if (event.keycode == uparrowcode) {                 playercircle.move({ x: 0, y: -10 });             }             if (event.keycode == downarrowcode) {                 playercircle.move({ x: 0, y: 10 });             }         });          layer.add(playercircle);         stage.add(layer);     }()); 

you need redraw circle(notice stuff added @ end of event listener. maybe try use transitionto(), or add delay make smoother.

    document.addeventlistener('keydown', function (event) {     if (event.keycode == leftarrowcode) {     playercircle.move({ x: -10, y: 0 });     alert("left pressed");     }     if (event.keycode == rightarrowcode) {         playercircle.move({ x: 10, y: 0 });         alert("right pressed");     }     if (event.keycode == uparrowcode) {         playercircle.move({ x: 0, y: -10 });     }     if (event.keycode == downarrowcode) {         playercircle.move({ x: 0, y: 10 });     }     layer.add(playercircle);     stage.add(layer);     return stage; });