Почему не рисуется виселица после каждой ошибки, а только после окончания всей игры, когда слово отгадано либо закончились попытки?

Question

SSKRI @SSKRI

JavaScript

Почему не рисуется виселица после каждой ошибки, а только после окончания всей игры, когда слово отгадано либо закончились попытки?

может быть alert блокирует canvas? Но как исправить, если это так.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Виселица2</title>
</head>
<body>
<h1>Виселица</h1>
<canvas id='canvas' width='400' height='400'></canvas>
<script>
    'use strict'


    function drawMan(sumProbe) {
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');

       if (sumProbe == 5) {
        ctx.lineWidth = 4;
        ctx.strokeRect(200, 10, 20, 20);
       } else if (sumProbe == 4) {
        ctx.beginPath();
        ctx.moveTo(210, 30);
        ctx.lineTo(210, 80);
        ctx.stroke();
        } else if (sumProbe == 3) {
        ctx.beginPath();
        ctx.moveTo(210, 50);
        ctx.lineTo(180, 40);
        ctx.stroke();
        } else if (sumProbe == 2) {
        ctx.beginPath();
        ctx.moveTo(210, 50);
        ctx.lineTo(240, 40);
        ctx.stroke();
        } else if (sumProbe == 1) {
        ctx.beginPath();
        ctx.moveTo(210, 80);
        ctx.lineTo(180, 120);
        ctx.stroke();
        } else if (sumProbe == 0) {
        ctx.beginPath();
        ctx.moveTo(210, 80);
        ctx.lineTo(240, 120);
        ctx.stroke();
        };
    }

    let words = [
        //'программа',
        'макака',
        //'прекрасный',
        //'оладушек',
        'мама',
        //'переменная',
        'слово'
    ];

    function pickWord() {
       return words[Math.floor(Math.random()*words.length)];
    } 
    let word = pickWord();


    function setupAnswerArray(word) {
        let answerArray = [];
        for (let i = 0; i < word.length; i++) {
        answerArray[i] = '_';
        }
        return answerArray;
    }
    let answerArray = setupAnswerArray(word);


    let remainingLetters = word.length;
    let sumProbe = 6;
    function showPlayerProgress(answerArray) {
            alert(answerArray.join(' '));
        }



    while (remainingLetters > 0 && sumProbe > 0) {

        showPlayerProgress(answerArray);

        function getGuess() {
            return prompt('Угадайте букву или нажмите Отмена для выхода из 
игры');

        }
        let quess = getGuess();


        if (quess === null) {
            break;
        }
        else if (quess.length !== 1) {
            alert('Пожалуйста введите одиночную букву');
        } else {

            function updateGameState(quess, word, answerArray) {
                let appearances = 0;
                for (let j = 0; j < word.length; j++) {
                    if ( word[j] === quess.toLowerCase() &&
                    answerArray[j] === '_' ) {
                    answerArray[j] = quess.toLowerCase();
                    appearances++;

                    }
                }
                return appearances;
            }

            let correctGuesses = updateGameState(quess, word, answerArray);
            remainingLetters -= correctGuesses;
            if (correctGuesses === 0) {

                sumProbe--; 

            }
        }
       drawMan(sumProbe);     
    }

    function total(answerArray) {
        showPlayerProgress(answerArray);
        alert('Отлично, было загадано слово '+ word);
    }
    total(answerArray);


</script>

</body>
</html>