javascript - How to use arrow keys to navigate between cells in a crossword puzzle

I am making a crossword puzzle, using a canvas.

How do you get the keyboard arrows to interact with the screen so that when the user presses any of the arrow keys, the cursor will advance to the next available input block.

This is how I drew the blocks on the canvas, with css styles added, button 1 and button 2: The "names001" stands for each box in the puzzle, then each box is assigned a letter value:

var r = event.keyCode;
if (r == 13 && m003 == "c") {
    w003 = 1;
    document.getElementById("names003").value = "c";
}

then a variable checks to see if each word is right and places a checkmark beside clue:

var check001 = w010 + w011 + w012 + w013 + w014; 
if (check001 == 5) { 
    clue001.innerHTML = "✔" 
}

Now, I want to know when the puzzle is drawn to the canvas, how do you get the keyboard arrows to interact with the canvas when the user presses one of the arrows(up, down, left, right and also the backspace to clear entry when guess is wrong; I want to move the cursor to advance to the next block.