JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="container">
<canvas id="canvas" width="200" height="200"></canvas>
<br>
<input class="first">
<button class="submit">submit</button>
</div>

CSS

.container {
  text-align: center;
}

JavaScript

var c = document.getElementById('canvas');
var context = c.getContext('2d');
var backgroundImage = new Image();

backgroundImage.onload = function() {
    drawScreen();
    drawText();
  };
backgroundImage.src = "http://lorempixum.com/200/200/";

function drawScreen() {
    context.drawImage(backgroundImage, 0, 0);
}

function drawText() {
    context.fillStyle = "red";
    context.font = "18px sans-serif";
    context.textBaseline = 'top';
    context.fillText("This is a test", 50, 100);
}

$('.submit').click(function() {
    // stop normal form submit event (redirect)
	update = $('.first').val();
  console.log(update);
  context.clearRect(0, 0, canvas.width, canvas.height);;
	context.fillText(update, 50, 100);
});