How do I draw on Canvas using arrow keys?

Question

I am trying to make a drawing program where users can draw with the keyboard. However I can't get the line to show up on the screen. Also, the console.log(lastX/lastY) don't output anything, so I am not sure if that is doing anything or is if my code is out of order.

const canvas = document.querySelector('canvas');
const { width, height } = canvas;

// set the join, cap and width for lines 
const ctx = canvas.getContext('2d');
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 15;

ctx.strokeStyle = 'black';


//object to keep track of when keys are pressed
let keysPressed = {};

//amount to move by
let moveAmount = 10;


document.addEventListener('keydown', (event) => {

  // if key pressed is an arrow key
   //left
   if (keysPressed[37]) {
    //console.log('left');
    lastX -= moveAmount;
  }
  //up
  else if (keysPressed[37]) {
    //console.log('up');
    lastY -= moveAmount;
  }
  //right
  else if (keysPressed[37]) {
   // console.log('right');
    lastX += moveAmount;
  }
  //down
  else if(keysPressed[37]) {
   // console.log('down');
    lastY += moveAmount;
  }

    // prevent normal arrow functionality
    event.preventDefault();

    // keep track of keys pressed
    keysPressed[event.key] = true;
    //console.log(keysPressed);

    // start the path with old x, y
    ctx.beginPath();

    // set new coordinates based on movement amount
    ctx.moveTo(lastX, lastY);

    // draw the path
    ctx.stroke();
});

Answer 1

const canvas = document.querySelector('canvas');
const { width, height } = canvas;

// set the join, cap and width for lines 
const ctx = canvas.getContext('2d');
//ctx.lineJoin = 'round';
//ctx.lineCap = 'round';
//ctx.lineWidth = 15;

//ctx.strokeStyle = 'black';
ctx.fillStyle = "black";

//object to keep track of when keys are pressed
//let keysPressed = {};

//amount to move by
let moveAmount = 2;

let lastX = 0;
let lastY = 0;

document.addEventListener('keydown', (event) => {

  // if key pressed is an arrow key
   //left
   if (event.keyCode === 37) {
    //console.log('left');
    lastX -= moveAmount;
  }
  //up
  else if (event.keyCode === 38) {
    //console.log('up');
    lastY -= moveAmount;
  }
  //right
  else if (event.keyCode === 39) {
   // console.log('right');
    lastX += moveAmount;
  }
  //down
  else if(event.keyCode === 40) {
   // console.log('down');
    lastY += moveAmount;
  }
    console.log(lastX, lastY)
    // prevent normal arrow functionality
    event.preventDefault();

    // keep track of keys pressed
    //keysPressed[event.key] = true;
    //console.log(keysPressed);

    // start the path with old x, y
    ctx.beginPath();

    // set new coordinates based on movement amount
    ctx.moveTo(lastX, lastY);

    // draw the path

    ctx.fillRect(lastX, lastY, moveAmount , moveAmount );
});

https://jsfiddle.net/xwdru7am/

This is the most basic thing you can do to draw on the canvas with the keyboard.

The main problems in you code are the if statements and lastX and lastY aren't declared.