JSFiddle - React, Tailwind, and code Playground

HTML

<div id="answer"></div>
<canvas id="canvas" width="800px" height="500px"> </canvas>
<form>
    <p id="info"></p>
    <label for="input">Wpisz słowo</label>
<input type="text"  name="input" id="input" value="słowo"> <input type='button' name="btn" id="btn" value="Zapisz">
</form>
<div class="keys">
    <div id="first"><button>Q</button><button>W</button><button>E</button><button>R</button><button>T</button><button>Y</button><button>U</button><button>I</button><button>O</button><button>P</button></div>
    <div id="second"><button>A</button><button>S</button><button>D</button><button>F</button><button>G</button><button>H</button><button>J</button><button>K</button><button>L</button></div>
    <div id="third"><button>Z</button><button>X</button><button>C</button><button>V</button><button>B</button><button>N</button><button>M</button></div>
</div>

CSS

#canvas {
    background-color: rgba(227, 255, 16, 0.23);
    position: relative;
    z-index: 10;
}
.keys {
    position: absolute;
    width: 500px;
    left: 150px;
    top: 380px;
    z-index: 11;
    border: solid 5px #000000;
    display: none;

}
.keys > div > * {
    width: 40px;
    height: 25px;
    margin: 5px 5px 5px 5px;

}
#second {
    padding-left: 15px;
}
#third {
    padding-left: 40px;
}
#info {
    position: absolute;
    z-index: 1;
    top: 400px;
    left: 50px;
    text-align: left;
    width: 200px;
    font-family: Verdana, Geneva, sans-serif;
    color: #ff0c05
    display: none;
}
#answer {
    width: 700px;
    height: 50px;
    position: absolute;
    left: 50px;
    top: 50px;
    z-index: 2;
    text-align:center;
}
.letterbox {
    position: relative;
    height: 50px;
    width: 50px;
    border: 3px black solid;
    display: inline-block;
    margin-left: 10px;
    margin-top: 0;
    text-align: center;
    font-size: 16px;
    overflow:auto;
}

JavaScript

/**
 * Created by mati on 2014-12-27.
 */
    //global variables
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var h = canvas.width;
var w = canvas.height;
    //starting function
var letsGo = function(){
    $("#btn").click(function(){
        hideWord();
        ctx.moveTo(0.2*w,0.2*h);
        ctx.lineTo(0.2*w,0.2*h);

    })
};
    //word should have only letters and +3 chars
var hideWord = function(){
    var inputfield = document.getElementById("input");
    var word = inputfield.value.replace(/ /g,'').replace(/[0-9]/g, '');
    //if all right - hide word and show keyboard
    if (word.length > 3){inputfield.value = ""; $("#btn").attr('disabled','disabled'); iClickYou(word); createField(word);}
    //else - show short info (1sec)
    else {var info=$("#info"); info.show(); info.text("Słowo jest zbyt krótkie"); info.fadeOut(1000);}
};
    //click event handler
var iClickYou = function(word){
    var keys = $(".keys");
    //show keyboard
    keys.fadeIn();
    keys.on('click','button',function(){
        var key = $(this);
        //store clicked char
        var letter = key.text();
        //send word and clicked char to compare
        check(word, letter);
        //disable clicked key
        key.attr('disabled','disabled');

    });
};
    //check it!
var check = function(word, letter){
    //numbers of possible mistakes; need to draw hangman
    var guessed = false;

    //all to uppercase
    word = word.toUpperCase();


    //for testing - delete later
    w = word; //
    //for testing - delete later

    //compare
    for (var i=word.length; i>-1; i--){
        if (word[i] === letter){
            //guess
            showLetter(letter, i);
            guessed = true;
        }
    }
    //miss
    if (guessed != true) {
        drawHangMan();
    }

};
    //show a boxes for guessed letter;
var createField = function(word){
    var leng = word.length;
    for (var i=0; i<leng; i++){
       ...