JSFiddle - React, Tailwind, and code Playground

by bharatsing

HTML

<H1 id="heading">Hangman</H1>
    <p id="someText">Thanks for playing!</p>
    <canvas id="hangmanArea" width="200" height="200"></canvas>

JavaScript

$(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);
            };
           ...