The way to handle this would be to capture which keys are down in your keyDown code and then do the movement itself in the handleTick function. You'll need to look at keyUp too so you know when the key is no longer down:
/*Keyboard input handlers - keydown and keyup*/
var left,
right,
up,
down;
function keyPressed(event){
if(!event){ var event = window.event; }
switch(event.keyCode){
case KEYCODE_LEFT:
console.log("left held");
left = true;
break;
case KEYCODE_RIGHT:
console.log("right held");
right = true;
break;
case KEYCODE_UP:
console.log("up held");
up = true;
break;
case KEYCODE_DOWN:
console.log("down held");
down = true;
break;
}
}
function keyReleased(event){
if(!event){ var event = window.event; }
switch(event.keyCode){
case KEYCODE_LEFT:
console.log("left released");
left = false;
break;
case KEYCODE_RIGHT:
console.log("right released");
right = false;
break;
case KEYCODE_UP:
console.log("up released");
up = false;
break;
case KEYCODE_DOWN:
console.log("down released");
down = false;
break;
}
}
function handleTick(event){
/*Scaling down the image*/
ellip.scaleX = 0.10;
ellip.scaleY = 0.10;
if(left) {
ellip.x -= 5;
} else if(right) {
ellip.x += 5;
}
if(up) {
ellip.y -= 5;
} else if(down) {
ellip.y += 5;
}
if (ellip.x > stage.canvas.width) {
ellip.x = stage.canvas.width;
}
stage.update();
}
EDIT: forked fiddle with this in action: http://jsfiddle.net/t2M82/