JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<canvas id="canvas1" width="600" height="400" style="float:left;"></canvas>
		<div style="float: left; width: 538px;">
			<label style="padding-right: 51px;">Text-Top:</label>
			<input type="text" id="text_cnv" size="40" maxlength="" />
			<button id="text_cnv3" style="visibility:hidden">
				Delete
			</button>
			<label style="padding-right: 32px;">Text-bottom:</label>
			<input type="text" id="text_cnv2" size="40" maxlength="" />
			<button id="text_cnv4" style="visibility:hidden">
				Delete
			</button>
			<label style="padding-right: 32px;">Text-horizontal:</label>
			<input type="text" id="text_horizontal"/>

		</div>

JavaScript

var ctx = document.getElementById('canvas1').getContext('2d');
			var r = 50;
			var space = Math.PI / 12;
			ctx.font = "bold 30px Courier";
			document.getElementById('text_cnv').onkeyup = function() {
				var textLength = (this.value.length);
				
				if (textLength > 5) {
					radiusChaninging = r + (textLength * 3);
				} else {
					radiusChaninging = r + (textLength);
				}
				textCircle(this.value, 150, 150, radiusChaninging, space, 1);
				document.getElementById('text_cnv3').style.visibility = 'visible';
			}

			document.getElementById('text_cnv2').onkeyup = function() {
				var textLength = (this.value.length);
				
				if (textLength > 5) {
					radiusChaninging = r + (textLength * 3);
				} else {
					radiusChaninging = r + (textLength);
				}
				textCircle(this.value, 150, 150, radiusChaninging, space);
				
				document.getElementById('text_cnv4').style.visibility = 'visible';
			}

			document.getElementById('text_cnv3').onclick = function() {
				
				textCircle('', 150, 150, 0, space, 1);
			    $("#text_cnv").val('');
			}

			document.getElementById('text_cnv4').onclick = function() {
			
				textCircle('', 150, 150, 0, space);
					$("#text_cnv2").val('');
			}
			
			
			

			
function  drawTextHorizontal(text, x, y,radius) {

  
ctx.font = "bold 30px Serif";
// ctx.textAlign = "center";

ctx.fillText(text, x, y,radius);

  					ctx.restore();					

}



var x_pos = 90;
var y_pos = 150;

document.getElementById('text_horizontal').onkeyup = function() {
	
var nr_w = (this.value.length);

   var textLength = (nr_w);
   

				
				if (textLength > 5) {
					radiusChaninging = r + (textLength * 2);
				} else {
					radiusChaninging = r + (textLength);
				}
  drawTextHorizontal(this.value, x_pos, y_pos,radiusChaninging);
}


	
			
			function textCircle(text, x, y, radius, space, top) {
				ctx.clearRect(0, ( top ? 0 : y), 600, y);
				space = space || 0;
				var numRadsPerLetter = (Math.PI - space * 2) /...