let {innerWidth, innerHeight} = window;
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');

canvas.width = innerWidth;
canvas.height = innerHeight;
document.body.appendChild(canvas);

let x = innerWidth >> 1;
let y = innerHeight >> 1;
let w = 30;
let h = 30;

ctx.fillStyle = "#0f0";
function render() {
  ctx.clearRect(0, 0, innerWidth, innerHeight);
  ctx.rect(x, y, w, h);
  ctx.fill();
}

document.addEventListener('keypress', ({ code }) => {
  switch (code) {
    case "KeyW":
      y -= 10;
      break;
    case "KeyA":
      x -= 10;
      break;
    case "KeyS":
      y += 10;
      break;
    case "KeyD":
      x += 10;
      break;
  }
  render();
});

render();