Слушатели событий и холст

У меня есть элемент canvas, где у меня есть набор прямоугольников, и эти прямоугольники должны соответственно перемещаться на основе выбора клавиш со стрелками на клавиатуре.

index.html

<canvas id="snakeCanvas" width="400" height="350"></canvas>

Я использую прослушиватель событий "keydown" для переключения с этой логикой, у меня есть следующий фрагмент кода в файле main.js

(function () {
    document.addEventListener("DOMContentLoaded", function () {
        game.init();

        document.addEventListener("keydown", function (evnt) {
            var keyDirection = evnt.keyCode;
            if (keyDirection === "37" && direction !== 'right') {
                direction = 'left';
                console.log('test');
            } else if (keyDirection === '38' && direction !== 'down') {
                direction = 'up';
            } else if (keyDirection === '39' && direction !== 'left') {
                direction = 'right';
            } else if (keyDirection === '40' && direction !== 'up') {
                direction = 'down';
            }
        });
    });

})();

Я могу утешить значение keyCode, но после отладки я заметил, что отладчик не переходит в условную логику. Что мне не хватает?