JSFiddle - React, Tailwind, and code Playground

HTML

<form action="signup.php" method="post" name="form">
	<table>
		<tr>
			<td><canvas id='captcha' width='120' height='40'></canvas></td>
			<td><input type="text" name="captcha" placeholder="Type the code"></td>
		</tr>
		<tr>
			<td><span id="update">Обновить</span></td>
			<td><input type="submit" name="submit" value="Отправить"><br/><span id="wrong" style="color:red"></span></td>	
		</tr>
	</table>
</form>

CSS

table{
	margin-top: 50px;
	margin-left: 50%;
	border-collapse: collapse;
	transform: translateX(-50%);
}
#update{
	cursor: pointer;
	text-decoration: underline;
}

JavaScript

$(document).ready(function(){
	var canvas=document.getElementById('captcha');
	var x=canvas.getContext('2d');
	var arr=['word','dino','sofa'];
    var keyword;
    var _reset = function(){
        x.clearRect(0, 0, x.width, x.height)
        keyword = Math.random().toString(36).replace(/[^a-z1-9]+/g,'').substr(0, 5);

        var grad=x.createLinearGradient(0,0,120,40);
        grad.addColorStop(0.0,'rgb(113,244,174)');
        grad.addColorStop(1.0,'rgb(247,203,109)');
        x.fillStyle=grad;
        x.fillRect(0,5,110,40);

        x.strokeStyle='rgb(140,140,140)';
        x.beginPath();
        x.moveTo(5,10);
        x.lineWidth=1;
        x.lineTo(25,15);
        x.stroke();

        x.strokeStyle='rgb(205,125,204)';
        x.beginPath();
        x.moveTo(25,30);
        x.lineWidth=1;
        x.lineTo(80,15);
        x.stroke();

        x.strokeStyle='rgb(125,115,205)';
        x.beginPath();
        x.moveTo(60,10);
        x.lineWidth=1;
        x.lineTo(90,35);
        x.stroke();

        x.font='25px Arial';
        x.fillStyle='black';
        x.textBaseline='top';
        x.fillText(keyword,10,10);
    }
    _reset();
    $('#update').click(_reset);
	$('input[name=submit]').click(function(){
		var check=$('input[name=captcha]').val();
		if(keyword!=check){
			$('#wrong').text('Вы ввели неверный код');
			return false;
		}
	});
});