JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id = 'intro' class = 'intro'>Страница загружается, ждите...<span>1chan.ru | wizique</span></div>
<div class = 'menu' >
  <a id = 'upload' class = 'button' >Загрузите жертву</a>
  <input type = 'textfield' id = 'text' class = 'text' placeholder = 'Введите текст сюда' />
  <input type = 'file' id = 'loader' />
  <a id = 'download' class = 'button' >Сохраните опущенку</a>
</div>
<canvas id = 'сanvas'></canvas>
<img id='pisss'...

CSS

html {
    font-size: 62.5%;
    font-family: sans-serif;
}
body {
    margin: 0;
    padding: 0;
}
.intro {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #eeeeee;
    font-size: 4rem;
    color: #444444;
    text-align: center;
    text-shadow: 0.1rem 0.1rem 0 #eee;
    line-height: 20rem;
}
.intro span {
    font-size: 2rem;
    color: #aaa;
    display: block;
}
.menu {
    position: relative;
    width: 100%;
    background: #00aa99;
    padding: 0.5rem;
    min-width: 70rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
     box-sizing: border-box;
}
.button {
    font-size: 1.4rem;
    background: #ddd;
    padding: 0.7rem 1.2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 0.2rem;
    box-shadow: 0 0.2rem 0 #888;
    text-shadow: 0.1rem 0.1rem #eee;
    cursor: pointer;
    text-align: center;
    color: inherit;
    text-decoration: none;
}
.button#upload {
    float: left;
}
.button#download {
    float: right;
}
.button:active {
    margin-top: 0.1rem;
    box-shadow: 0 0.1rem 0 #888;
}
.text:focus, .button:focus {
    outline: 0;
}
.text {
    font-size: 1.4rem;
    display: inline-block;
    border: 0;
    padding: 0.7rem 0.8rem;
    margin: 0 0.5rem;
    width: 30rem;
    height: 2rem;
    border-radius: 0.2rem;
}
input[type=file] {
    display: none;
}
img {
    display: none;
}
canvas {
    position: relative;
    margin: 2rem auto;
    display: block;
    border: 1px solid #ccc;
}

JavaScript

var MAX_WIDTH = 600;

CanvasRenderingContext2D.prototype.pissText = function (text) {
    with(this) {
        font = '40px Arial';
        textAlign = 'center';
        fillStyle = '#ffffff';
        strokeStyle = '#000000';
        lineWidth = 8;
        lineJoin = 'round';
        strokeText(text, MAX_WIDTH / 2, 60);
        fillText(text, MAX_WIDTH / 2, 60);
    }
};

pissGenerator = function (e) {
    var c = document.getElementById('сanvas');
    var ctx = c.getContext('2d');
    var img = new Image();
    var text = document.getElementById('text').value || " ";
    img.src = e.target.result;
    img.onload = function () {
        var cw = c.width = MAX_WIDTH;
        var ch = c.height = cw * this.height / this.width;
        var tm = undefined;
        ctx.drawImage(img, 0, 0, cw, ch);
        ctx.pissText(text);
        ctx.drawImage(tm = document.getElementById('pisss'), 0, ch - tm.height);
        ctx.drawImage(tm = document.getElementById('fuck'), cw - tm.width, ch - tm.height);
        document.getElementById('download').href = c.toDataURL();
    };
};

document.getElementById('loader').onchange = function () {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = pissGenerator;
        reader.readAsDataURL(this.files[0]);
    }
};

document.getElementById('upload').onclick = function () {
    document.getElementById('loader').click();
};

document.getElementById('download').onclick = function () {
    this.download = 'piss.png';
};

readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        var intro = document.getElementById('intro');
        intro.parentNode.removeChild(intro);
        clearInterval(readyStateCheckInterval);
    }
}, 1000);