JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="POST" id="nametag" class="nametag">
    Line1: 
    <input type="text" id="line1" name="line1" style="width:250px;" /><br>
    Line2:
    <input type="text" id="line2" name="line2" style="width:250px;" /><br>
    Line3:
    <input type="text" id="line3" name="line3" style="width:250px;" /><br>
    Line4:
    <input type="text" id="line4" name="line4" style="width:250px;" /><br>
    
    <br><br><b>Name Tag</b><br>
    <canvas width="282px" height="177px" id="myCanvas" style="border: black thin solid;"></canvas>
</form>

JavaScript

$(document).ready(function () {
    var canvas = $('#myCanvas')[0];
    var context = canvas.getContext('2d');
    
    var imageObj = new Image();
    imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
    };
    imageObj.src = "http://dummyimage.com/282x177/FFF/FFF"; 

    $('#nametag').bind('change keyup input', updateCanvas);
    $('#line2').bind('click', updateCanvas);
    $('#line3').bind('click', updateCanvas);
    $('#line4').bind('click', updateCanvas);

    function updateCanvas() {

	    context.clearRect(0, 0, canvas.width, canvas.height);
	    context.drawImage(imageObj, 0, 0);
	    context.textAlign = "center";

	    context.font = "bold 18pt Arial";
	    
	    context.fillText($('#line1').val(), canvas.width * 0.5, 70);
	    
	    context.font = "12pt Arial";
	    context.fillText($('#line2').val(), canvas.width * 0.5, 90);

	    context.fillText($('#line3').val(), canvas.width * 0.5, 120);

	    context.fillText($('#line4').val(), canvas.width * 0.5, 140);
	
    }
});