I am creating a board game in JavaScript/HTML that has the option to play human vs. computer or computer vs. computer. It seems I get stuck in a loop when implementing the computer's turn. Here is an outline of the code:

function drawBoard() {
    canvas.drawImage(...); //draw pieces and grid lines.
}

function makeMove(x, y) {
    // all game logic
    drawBoard();
    if (player turn == computer) {
        computerMove();
    }
}

function humanPlayerMousedownEvent() {
    makeMove(x, y);
}

function computerMove() {
    // computer logic
    sleep(500 ms);
    makeMove(x, y);
}

For some reason the board is not redrawn until after the computer has made a move. E.g. mouseDown -> 500 ms -> computerMove -> drawBoard -- Even though drawBoard is before computerMove. If I set computer vs. computer I get an endless loop. I think the problem is that the computer calls makeMove from within makeMove causing recursion. Does anyone have advice on how to decouple the makeMove loop?

Thanks!