JSFiddle - React, Tailwind, and code Playground

by hollanditkzn

HTML

<canvas id="textCanvas"></canvas>
<input type="text" id="textInput">
<select class="selectKonstr">
						<option value="Arial">Arial</option>
						<option value="Times New Roman">Times New Roman</option>
						<option value="Andale Mono">Andale Mono</option>
						<option value="Comic Sans">Comic Sans</option>
					</select>
					<select class="selectKonstr sizeText">
						<option value="8">8</option>
						<option value="10">10</option>
						<option value="12">12</option>
						<option value="14">14</option>
						<option value="16">16</option>
						<option value="18">18</option>
						<option value="20" selected>20</option>
						<option value="22">22</option>
						<option value="24">24</option>
						<option value="26">26</option>
						<option value="28">28</option>
						<option value="30">30</option>
						<option value="32">32</option>
						<option value="34">34</option>
						<option value="36">36</option>				
					</select>

JavaScript

var canvas = document.getElementById("textCanvas");
var ctx = canvas.getContext("2d");
$(".selectKonstr").on("change", function(){
	var fontFamily = $('.fontFamily').val();
    var fontSize = $('.sizeText').val();
    ctx.font = [
        'bold',
        fontSize + 'px',
        fontFamily
      ].join(' ');
		ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillText($("#textInput").val(), 0, 50);
});
$("#textInput").on("input", function(){
	ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillText($("#textInput").val(), 0, 50);
})