<body>
    <section class="preview">
    </section>

    <canvas width="480" height="320" tabindex="0">

    </canvas>

  </body>
  
</html>
p {
        color: purple;
        margin: 0.5em 0;
      }

      * {
        box-sizing: border-box;
      }

      canvas {
        border: 1px solid black;
      }
 const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');

    function drawCircle(x, y, size) {
      ctx.fillStyle = 'white';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      ctx.beginPath();
      ctx.fillStyle = 'black';
      ctx.arc(x, y, size, 0, 2 * Math.PI);
      ctx.fill();
    }

    let x = 50;
    let y = 50;
    const size = 30;

    drawCircle(x, y, size);
// Add your code here

document.addEventListener('keydown', event => {
  let value = event.key;
  switch (value){
    case 'd':
    x++
    break;
    case 'a':
    x--
    break;
    case 'w':
    y--
    break;
    case 's':
    y++
    break;
  }
      drawCircle(x,y,size);
  });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.