Edit in JSFiddle

secret = "pikapoo";
currentGuesses = [];

handleGuess = function() {
    event.returnValue = false;
    
    var guess = document.getElementById("letter").value;
    
    if(!isValidGuess(guess)) {
        return;
    }
    
    currentGuesses.push(guess);
    
    document.getElementById("lettersGuessed").innerText += guess;
    
    if(secret.indexOf(guess) == -1) {
        letHimHang();
    } else {
        updatePuzzle();
    }
};

isValidGuess = function(guess) {
    if(!guess) {
        return false;
    }
    
    return currentGuesses.indexOf(guess) == -1;
};

updatePuzzle = function() {
    var puzzleText = "";
    var won = true;
    for(var i = 0; i < secret.length; i++) {
        if(currentGuesses.indexOf(secret[i]) != -1) {
            puzzleText += secret[i];
        } else {
            puzzleText += "_";
            won = false;
        }
    }
    document.getElementById("puzzle").innerText = puzzleText;
    if(won) {
        alert("He's been saved!");
    }
};

context = document.getElementById("hangman").getContext("2d");

drawNoose = function() {
    context.beginPath();
    context.lineWidth = 4;
    context.moveTo(75, 350);
    context.lineTo(75, 50);
    context.lineTo(250, 50);
    context.stroke();
    context.beginPath();
    context.lineWidth = 1;
    context.moveTo(250, 50);
    context.lineTo(250, 100);
    context.stroke();
    context.beginPath();
};

drawHead = function() {
    context.beginPath();
    context.lineWidth = 2;
    context.arc(250,120,20,0,2*Math.PI);
    context.stroke();
};

drawBody = function() {
    context.beginPath();
    context.moveTo(250,140);
    context.lineTo(250,250);
    context.stroke();
};

drawLeftArm = function() {
    context.beginPath();
    context.moveTo(250,160);
    context.lineTo(210,200);
    context.stroke();
};

drawRightArm = function() {
    context.beginPath();
    context.moveTo(250,160);
    context.lineTo(290,200);
    context.stroke();
};

drawLeftLeg = function() {
    context.beginPath();
    context.moveTo(250,250);
    context.lineTo(220,310);
    context.stroke();
};

drawRightLeg = function() {
    context.beginPath();
    context.moveTo(250,250);
    context.lineTo(280,310);
    context.stroke();
};

leftToHang = [drawNoose, drawHead, drawBody, drawLeftArm, drawRightArm, drawLeftLeg, drawRightLeg];
letHimHang = function() {
    var drawFunction = leftToHang.shift();
    drawFunction();
    if(leftToHang.length == 0) {
        alert("He's dead, Jim!");
    }
};

updatePuzzle();

<CANVAS id="hangman" width="400" height="400"></CANVAS>
<DIV id="puzzle"></DIV>
<DIV id="lettersGuessed">&nbsp;</DIV>
<DIV id="guessingArea">
    <FORM id="guessingForm" onsubmit="handleGuess()">
        <INPUT type="text" id="letter" maxLength="1" />
        <INPUT type="submit" value="Guess" />
    </FORM>
</DIV>

body {
    font-family: Helvetica;
}

canvas#hangman {
    border: 1px solid black;
}

div#puzzle {
    font-size: 4em;
    width: 400px;
    letter-spacing: 0.2em;
    text-align: center;
}

div#lettersGuessed {
    font-size: 3em;
    width: 400px;
    letter-spacing: 0.1em;
    text-align: center;
}

div#guessingArea {
    width: 400px;
    text-align: center;
}

input#letter {
    width: 40px;
    font-size: 2em;
    text-align: center;
}

input[type=submit] {
    font-size: 1.5em;
}