Hey guys,
I am a beginner and i’m making a tic tac toe game in pure js. My problem is i’m trying to figure out how to block a cell from being marked again with either X or O.
So far i tried turning my board in to an array with “available” variable and splicing it after a click but i don’t think that’s gonna work…
any advice or hints would be great, thanks 
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
//Variables
let row = 3;
let col = 3;
const vacant = "white";
let sq = 100;
let w = canvas.clientWidth/3;
let h = canvas.clientHeight/3;
let currentPlayer = "";
//players
const players = ['X', 'O']
const player1 = players[0];
const player2 = players[1];
//draw a square
function drawSquare(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x*sq, y*sq, sq, sq);
ctx.strokeStyle = 'black';
ctx.strokeRect(x*sq, y*sq, sq, sq);
}
//Create board
let board = [ ];
for(let r = 0; r < row; r++){
board[r] = [ ];
for(let c = 0; c < col; c++) {
board[r][c] = vacant;
}
}
//Draw Board
function drawBoard() {
for(r = 0; r < row; r++) {
for(c = 0; c < col; c++){
drawSquare(c, r, board[r][c]);
}
}
}
drawBoard();
// sets up the game
function setup() {
//let the starting player be selected at random
let randomPlayer = Math.floor(Math.random() *2 );
currentPlayer = player1;
if (randomPlayer == !0){
currentPlayer = player2;
alert('Player 2 starts the game !')
}else {
alert('Player 1 starts the game !')
};
}
setup();
document.getElementById("currentPlayerH2").innerHTML = currentPlayer + "'s turn";
// listens for clicks on the canvas to draw the symbol
function drawSymbol () {
canvas.addEventListener('click', () => {
// get the position of the board relative to the page
let {left, top} = canvas.getBoundingClientRect();
// get the position of the click relative to the page
let mouseX = event.clientX - left;
let mouseY = event.clientY - top;
// calculate which square is being clicked
let newRow = Math.floor(mouseY / sq);
let newCol = Math.floor(mouseX / sq);
// Calculate middle of a square
let x = w * newCol + w/2;
let y = h * newRow + h/2;
let xr = w/4;
let notVacant = (newCol, newRow);
board[r][c] = notVacant;
// Draw an X or O depending on the player's turn
if(board[r][c] == vacant){
console.log(newRow, newCol);
if(currentPlayer == players[0]) { //
ctx.lineWidth = 5;
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.moveTo(x-xr, y-xr);
ctx.lineTo(x+xr, y+xr);
ctx.moveTo(x+xr, y-xr);
ctx.lineTo(x-xr, y+xr);
ctx.stroke();
currentPlayer = player2;
} else {
ctx.lineWidth = 5;
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.arc(x , y, 40, 0, 2 * Math.PI);
ctx.stroke();
currentPlayer = player1;
}
} else {
return;
}
}
)
}
drawSymbol();
what i tried to do is this: