[Malleys]

Зачем на каждом нажатии клавиши переопределяется обработчик отжимания клавиши?

e.keyCode

Это не рекомендуемое к использованию свойство, используйте вместо него KeyboardEvent.prototype.key или KeyboardEvent.prototype.code

Исправленный вариант, в объекте pressedKeys хранятся нажатые клавишы...

var pressedKeys = {};

onkeydown = function(e) {
	if(pressedKeys[e.code]) return;
	pressedKeys[e.code] = true;

	if(e.code === "KeyW") {
		console.log('Кнопка W нажата');
	} else if(e.code === "KeyD") {
		console.log('Кнопка D нажата');
	}
}

onkeyup = function(e) {
	delete pressedKeys[e.code];

	if(e.code === "KeyW") {
		console.log('Отжата кнопка W');
	} else if(e.code === "KeyD") {
		console.log('Отжата кнопка D');
	}
}

Можно упростить до...

var pressedKeys = {};

onkeydown = function(e) {
	if(e.code in pressedKeys) return;
	pressedKeys[e.code] = true;
}

onkeyup = function(e) {
	delete pressedKeys[e.code];
}

В pressedKeys находятся зажатые клавиши.

Вот улучшенный вариант... Класс PressedKeysRegistry позволяет включать/выключать отслеживание нажатых клавиш, также используется метод addEventListener, чтобы вы могли добавить и другие обработчики событии keydown и keyup.

<canvas id="app" width="300" height="300" style="border: solid;"></canvas>
<script>

function PressedKeysRegistry() {
	this.handler = this.handler.bind(this);
}

PressedKeysRegistry.prototype = {
	constructor: PressedKeysRegistry,
	start: function() {
		addEventListener("keydown", this.handler);
		addEventListener("keyup", this.handler);
	},
	stop: function() {
		removeEventListener("keydown", this.handler);
		removeEventListener("keyup", this.handler);
	},
	handler: function(event) {
		if(event.type === "keydown") {
			if(this[event.code]) return;
			this[event.code] = true;
		} else if(event.type === "keyup") {
			delete this[event.code];
		}
	}
};

// пример
var pressedKeys = new PressedKeysRegistry();
pressedKeys.start();
var player = { x: 50, y: 50 };
var field = { width: 100, height: 100 };
var ctx = app.getContext("2d");

(function loop() {
	ctx.clearRect(0, 0, app.width, app.height);
	ctx.fillRect(player.x / field.width * app.width, player.y / field.height * app.height, 20, 20);
	
	if("KeyD" in pressedKeys) player.x++;
	if("KeyA" in pressedKeys) player.x--;
	if("KeyS" in pressedKeys) player.y++;
	if("KeyW" in pressedKeys) player.y--;

	setTimeout(loop, 50);
})();

</script>