html5 game object movement not working - html

Question

I am trying to improve my html5 game that I am creating, I am trying to put player object movement into the game like so :
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
theplayer = function(width, height, color, x, y)
{
this.width = width;
this.height = height;
this.color = color;
this.speedx = 0;
this.speedy = 0;
this.x = x;
this.y = y;
this.update=function()
{
context.fillStyle = color;
context.fillRect(this.x,this.y,this.width,this.height);
}
this.newpos=function()
{
this.x += this.speedx;
this.y += this.speedy;
}
}
var theplayer = new theplayer(30, 30, "red", 10, 120);
function clearboard()
{
context.clearRect(0,0,canvas.width,canvas.height);
}
function movement()
{
document.addEventListener("keydown",keyPressed, false);
document.addEventListener("keyup",keyLifted, false);
}
function keyPressed(event)
{
var keyPressed = String.fromCharCode(event.keyCode);
if (keyPressed == "W")
{
theplayer.speedx += 1;
}
else if (keyPressed == "D")
{
theplayer.speedy += 1;
}
else if (keyPressed == "S")
{
theplayer.speedx -= 1;
}
else if (keyPressed == "A")
{
theplayer.speedy -= 1;
}
}
var rungame = setInterval(function()
{
clearboard();
theplayer.newpos();
theplayer.update();
}, 20);
The program should make the player control the player object with the WASD keys but I am unable to make the change of X and Y coordinates apply to 'theplayer' object into the 'newpos' function. How can I solve the problem and is there anyway to put multiple key stroke presses of the WASD keys ?