JSFiddle - React, Tailwind, and code Playground

by karthick Chandran

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img style="display:none" id="myimage" class="myimage" src="some php code" crossorigin="anonymous">
<canvas id="canvas"> </canvas>

CSS

#canvas {
  border: solid 1px black;
  width: 100%;
  height: 100%;
}

JavaScript

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);
$(document).on('input', '#inp', function() {
  //redraw image
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.font = '30px "MfQueenLeela"'
  ctx.drawImage($('img').get(0), 0, 0);
  
  //refill text
  ctx.fillStyle = "red";
  ctx.fillText($(this).val(), 345, 350);
});