Это чё, в setInterval запихнули подключение обработчика keydown? Умно. Не нужен тут никакой setInterval.
Сам обработчик keydown слишком сложно выглядит - зачем в четырёх разных местах делать один и тот же вызов функции? Сначала меняете координаты, а в самом конце - дёргаете перерисовку.
Размер картинок - а если решите поменять? Или опечатаетесь где-нибудь? Сделайте константу.
Что касается рисования, то наверное, проще всего будет замостить холст фоновым изображением, а потом рисовать персонажа.
Как это всё может выглядеть:
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const TILE_SIDE = 32;
let pickX = 0;
let pickY = 0;
const ground = new Image();
ground.src = 'Ground.png';
const pick = new Image();
pick.src = 'Pick.png';
document.addEventListener('keydown', function(e) {
switch (e.keyCode) {
case 87: pickY -= TILE_SIDE; break;
case 65: pickX -= TILE_SIDE; break;
case 83: pickY += TILE_SIDE; break;
case 68: pickX += TILE_SIDE; break;
default: return;
}
draw();
});
function draw() {
for (let x = 0; x < canvas.width; x += TILE_SIDE) {
for (let y = 0; y < canvas.height; y += TILE_SIDE) {
ctx.drawImage(ground, x, y);
}
}
ctx.drawImage(pick, pickX, pickY);
}
draw();