JSFiddle - React, Tailwind, and code Playground

by Sahil Kashyap

HTML

<canvas id="canvas"> </canvas>
<img style="display: none" class="myimage" src='https://picsum.photos/200/200'/>
<label class="inpLable" for="input">Enter Name: </label>
<input class="inp" maxlength="12" type="text" id="inp"/>

JavaScript

$('#inp').on('input', function(){
  var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d');
  canvas.width = $('img').width();
  canvas.crossOrigin = "Anonymous";
  canvas.height = $('img').height();
  ctx.drawImage($('img').get(0), 0, 0);
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.font = "20px Verdana";
  ctx.drawImage($('img').get(0), 0, 0);
  ctx.fillStyle = "white";
  ctx.fillText($(this).val(), 10, 50);
});