HTML Canvas not updating with Javascript

Question

I am attempting to do a simple Hangman game, with lines being drawn straightaway for each wrong answer. However, all the lines only get drawn right at the end in the browser. Any help would be much appreciated. Here is my code:

<!DOCTYPE html>

<html>
<head>
    <title>Hangman</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>

<body>
    <H1 id="heading">Hangman</H1>
    <p id="someText">Thanks for playing!</p>
    <canvas id="hangmanArea" width="200" height="200"></canvas>
    <script type="text/javascript">
        $(window).on('load',function(){
            //draw hung man function
            var drawHangman = function(numWrongs){
                var eltHangmanArea = document.getElementById("hangmanArea");
                var ctxHangmanArea = eltHangmanArea.getContext("2d");
                ctxHangmanArea.strokeStyle = "Black";
                ctxHangmanArea.lineWidth = 4;
                ctxHangmanArea.beginPath();
                if (numWrongs===0){
                    ctxHangmanArea.clearRect(0,0,200,200);
                } else if (numWrongs===1){
                    ctxHangmanArea.moveTo(20,180);
                    ctxHangmanArea.lineTo(20,20);
                } else if (numWrongs===2){
                    ctxHangmanArea.moveTo(20,20);
                    ctxHangmanArea.lineTo(100,20);                    
                } else if (numWrongs===3){
                    ctxHangmanArea.moveTo(100,20);
                    ctxHangmanArea.lineTo(100,40);                    
                } else if (numWrongs===4){
                    ctxHangmanArea.moveTo(120,60);
                    ctxHangmanArea.arc(100,60,20,0,Math.PI*2,false);                    
                } else if (numWrongs===5){
                    ctxHangmanArea.moveTo(100,80);
                    ctxHangmanArea.lineTo(100,120);                    
                } else if (numWrongs===6){
                    ctxHangmanArea.moveTo(80,100);
                    ctxHangmanArea.lineTo(120,100);                    
                } else if (numWrongs===7){
                    ctxHangmanArea.moveTo(100,120);
                    ctxHangmanArea.lineTo(80,140);                    
                } else if (numWrongs===8){
                    ctxHangmanArea.moveTo(100,120);
                    ctxHangmanArea.lineTo(120,140);                                
                }
                ctxHangmanArea.stroke();
            };
            //Word bank
            var wordBank = ["abc","def","ghi"];
            //Setting parameters
            var targetWord =
                wordBank[Math.floor(Math.random()*wordBank.length)];
            var numLetters = targetWord.length;
            var maxNumTries = 8;
            var hiddenLetter = "_";
            //Trial loop
            var gotItFlag = false;
            var gotSomethingFlag = false;
            var tryCounter = 0;
            var tryLetter = null;
            var hiddenWord = [];
            for(var letterCounter = 0; letterCounter<numLetters;letterCounter++){
                hiddenWord.push(hiddenLetter);
            }
            drawHangman(0); /*clear canvas*/
            while(gotItFlag===false && tryCounter<maxNumTries){
                tryLetter = prompt("Word: " + hiddenWord.join(" ") + ". Please input next guess! You have " +
                                   String( maxNumTries - tryCounter) + " more tries.");
                if (!(tryLetter===null)) {
                    //only go on if user actually put something in
                    tryLetter = tryLetter.slice(0,1);
                    tryLetter = tryLetter.toLowerCase();
                    gotItFlag = true;
                    gotSomethingFlag = false;
                    for(var letterCounter = 0; letterCounter<numLetters; letterCounter++){
                        if (tryLetter === targetWord[letterCounter].toLowerCase()) {
                            hiddenWord[letterCounter] = targetWord[letterCounter];
                            gotSomethingFlag = true;
                        }
                        if (hiddenWord[letterCounter] === hiddenLetter) {
                            gotItFlag = false;
                        }
                    }
                    tryLetter = null;
                    if (gotSomethingFlag === false) {
                        tryCounter++;
                        drawHangman(tryCounter);
                    }
                }
            }
            if (gotItFlag) {
                alert("You have got the word, " + targetWord + ".  Well done!");
            } else {
                alert("You have lost. It was " + targetWord + ". Better luck next time.");
            }
        });
    </script>
</body>
</html>

Not obvious duplicate of [How do I know when HTML5 Canvas' Rendering is Finished?](http://stackoverflow.com/questions/41346772/how-do-i-know-when-html5-canvas-rendering-is-finished) (different symptoms, same cause) — Kaiido, Dec 31 '16 at 10:39

Roljhon · Answer 1 · 2016-12-31T10:49:51.680

1

Sorry, I don't have enough reputation to post this in the comment area. The issue is because you're using a prompt in getting the input from the user which will block the DOM to load. Take note that alert and prompt will pause the DOM to load until response.

edited Dec 31 '16 at 10:49

answered Dec 31 '16 at 09:47

Roljhon

1,279
2
9
22

This seems like a correct answer, you may want to improve it by giving some explanations on what happens rather than apologizing making it look like a comment. – Kaiido Dec 31 '16 at 10:38
sorry for that @kai – Roljhon Dec 31 '16 at 10:48

score 0 · Answer 2 · answered Dec 31 '16 at 10:08

You can check output as per your need at fiddle jsfiddle.net/bharatsing/e36werp8/1/

$(document).ready(function(){            
            //draw hung man function
            var drawHangman = function(numWrongs){
                var eltHangmanArea = document.getElementById("hangmanArea");
                var ctxHangmanArea = eltHangmanArea.getContext("2d");
                ctxHangmanArea.strokeStyle = "Black";
                ctxHangmanArea.lineWidth = 4;
                ctxHangmanArea.beginPath();
                if (numWrongs===0){
                    ctxHangmanArea.clearRect(0,0,200,200);
                } else if (numWrongs===1){
                    ctxHangmanArea.moveTo(20,180);
                    ctxHangmanArea.lineTo(20,20);
                } else if (numWrongs===2){
                    ctxHangmanArea.moveTo(20,20);
                    ctxHangmanArea.lineTo(100,20);                    
                } else if (numWrongs===3){
                    ctxHangmanArea.moveTo(100,20);
                    ctxHangmanArea.lineTo(100,40);                    
                } else if (numWrongs===4){
                    ctxHangmanArea.moveTo(120,60);
                    ctxHangmanArea.arc(100,60,20,0,Math.PI*2,false);                    
                } else if (numWrongs===5){
                    ctxHangmanArea.moveTo(100,80);
                    ctxHangmanArea.lineTo(100,120);                    
                } else if (numWrongs===6){
                    ctxHangmanArea.moveTo(80,100);
                    ctxHangmanArea.lineTo(120,100);                    
                } else if (numWrongs===7){
                    ctxHangmanArea.moveTo(100,120);
                    ctxHangmanArea.lineTo(80,140);                    
                } else if (numWrongs===8){
                    ctxHangmanArea.moveTo(100,120);
                    ctxHangmanArea.lineTo(120,140);                                
                }
                ctxHangmanArea.stroke();

                setTimeout(AskAnswer,1000);
            };
            //Word bank
            var wordBank = ["abc","def","ghi"];
            //Setting parameters
            var targetWord =
                wordBank[Math.floor(Math.random()*wordBank.length)];
            var numLetters = targetWord.length;
            var maxNumTries = 8;
            var hiddenLetter = "_";
            //Trial loop
            var gotItFlag = false;
            var gotSomethingFlag = false;
            var tryCounter = 0;
            var tryLetter = null;
            var hiddenWord = [];
            for(var letterCounter = 0; letterCounter<numLetters;letterCounter++){
                hiddenWord.push(hiddenLetter);
            }

            drawHangman(0); /*clear canvas*/

            function AskAnswer(){

              if(gotItFlag===false && tryCounter<maxNumTries){                
                  tryLetter = prompt("Word: " + hiddenWord.join(" ") + ". Please input next guess! You have " +
                                     String( maxNumTries - tryCounter) + " more tries.");
                  if (!(tryLetter===null)) {
                      //only go on if user actually put something in
                      tryLetter = tryLetter.slice(0,1);
                      tryLetter = tryLetter.toLowerCase();
                      gotItFlag = true;
                      gotSomethingFlag = false;
                      for(var letterCounter = 0; letterCounter<numLetters; letterCounter++){
                          if (tryLetter === targetWord[letterCounter].toLowerCase()) {
                              hiddenWord[letterCounter] = targetWord[letterCounter];
                              gotSomethingFlag = true;
                          }
                          if (hiddenWord[letterCounter] === hiddenLetter) {
                              gotItFlag = false;
                          }
                      }
                      tryLetter = null;
                      if (gotSomethingFlag === false) {
                          tryCounter++;                       
                          drawHangman(tryCounter)                       
                      }
                      else{
                      setTimeout(AskAnswer,1000);
                      }
                  }
              }

              if((maxNumTries - tryCounter)==0){
                if (gotItFlag) {
                    alert("You have got the word, " + targetWord + ".  Well done!");
                } else {
                    alert("You have lost. It was " + targetWord + ". Better luck next time.");
                }
              }
            }

        });

HTML Canvas not updating with Javascript

2 Answers2