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.

  • 1
    \$\begingroup\$ What does your selection and input-handling code look like so far? How are you drawing the selected cell in the puzzle? \$\endgroup\$
    – DMGregory
    Commented Dec 9, 2018 at 10:18
  • 2
    \$\begingroup\$ Hi A.J. Please ask one question per post. If you want to ask about adding numbers to cells, that's a different question than how to navigate between the cells with arrow keys, so ask it in a separate post. \$\endgroup\$
    – DMGregory
    Commented Dec 10, 2018 at 2:22

1 Answer 1


Assuming your crossword puzzle is a 2D array, I'll call it grid, containing all blocks (even ones that do not expect a letter):

  • Create 2 integers, selection_x and selection_y initialised at 0.
  • Create a new object, let's name it highlight, set it's x and y the same as grid[0][0]. This object shows to the user which cell is highlighted, how it does that depends on you.
  • Every time an arrow key is pressed, increase/decrease selection_x or selection_y (depending on which button is pressed, check to make sure it's still inside the grid, then change highlight's position to grid[selection_x][selection_y].

This is enough for a basic setup, here are a few extra ideas:

  • Every time a key arrow is pressed, change the value of the selection only if the new cell accepts a letter (and is not an empty cell). This may need to change the initial cell to the first active one, instead of 0, 0.
  • Change the color of the highlighted cell, when an arrow key is pressed change current selection to (let's say) white: grid[selection_x][selection_y].color = white;, then change the value of selection_x/selection_y, then change the new cell's color to (let's say) red: grid[selection_x][selection_y].color = red;

Note that all code is pseudocode, since you haven't shared much about your project, I can't make it more specific.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .