Draw squares on a canvas from an array

Question

I have a problem about how to draw squares on a canvas, using the coordinates in a nested array. The idea is to highlight some squares so the player knows he can move on these ones.

The function drawings these squares is called after, so the entire canvas is not drawn again.

I know how to display an image on a precise square, but don't understand how I can iterate through a nested array so it is usable by the canvas to draw again some squares in red.

How to transform "array coordinates" into values usable by the canvas drawing methods.

Or does the problem comes from a difference between availableSquare and chartBoard?

Since I didn't find any topic on this, I hope my example is detailed enough.

function Game(width, height) {
  this.width = width;
  this.height = height;
}
const game = new Game(10, 10)
const chartBoard = [];
const availableSquares = [
  [6, 6],
  [6, 7],
  [6, 8]
]


// The nested arrays with all the possible position
function createBoard(width, height) {
  for (let i = 0; i < width; i++) {
    const row = [];
    chartBoard.push(row);
    for (let j = 0; j < height; j++) {
      const col = {};
      row.push(col);
    }
  }
  return chartBoard;
};
createBoard(game.width, game.height);
console.log(chartBoard)

// Display the array on the canvas
const ctx = $('#board').get(0).getContext('2d');

function drawBoard(width, height) {
  for (let i = 0; i < width; i++) {
    for (let j = 0; j < height; j++) {
      ctx.strokeStyle = 'rgba(0, 0, 0, 0.7)';
      ctx.beginPath();
      ctx.strokeRect(j * 64, i * 64, 64, 64);
      ctx.closePath();
    }
  }
};
drawBoard(game.width, game.height);

// Function to highlight the squares from the array availableSquares
//        function showAvailableMovement(array) {
//            for (let i = 0; i < array.length; i++) {
//                for (let j = 0; j < array[i].length; j++) {
//
//                    ctx.strokeStyle = 'red';
//                    ctx.beginPath();
//                    ctx.strokeRect(j * 64, i * 64, 64, 64);
//                    ctx.closePath();
//                }
//            }
//        };
//        showAvailableMovement(availableSquares);

body {
  background-color: black;
}

#board {
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="board" width="640" height="640"></canvas>

Answer 1

Since you have just array of coordinates, you don't need to run nested for loops to access values. You can do it like this:

function showAvailableMovement(array) {
    for (let i = 0; i < array.length; i++) {
        let x = array[i][0],
            y = array[i][1];
        ctx.strokeStyle = 'red';
        ctx.beginPath();
        ctx.strokeRect(x * 64, y * 64, 64, 64);
        ctx.closePath();
        }
    };

In your method you were actually running for twice, so the values were by iterations:

1. i = 0, j = 0
2. i = 0, j = 1
3. ... and so on

Answer 2

You're actually really close, you're just confusing your x and y values:

// Function to highlight the squares from the array availableSquares
function showAvailableMovement(array) {
    for (let i = 0; i < array.length; i++) {
        for (let j = 0; j < array[i].length; j++) {

            let x = array[i][0];
            let y = array[i][1];

            ctx.strokeStyle = 'red';
            ctx.beginPath();
            ctx.strokeRect(x * 64, y * 64, 64, 64);
            ctx.closePath();
        }
    }
};
showAvailableMovement(availableSquares);