JSFiddle - React, Tailwind, and code Playground

text to image, with canvas.

by Trina Lu

HTML

<input type="text" id="mytext" /> <br><br><br>
<canvas id="mycanvas"></canvas>

JavaScript

var input = document.querySelector('#mytext');
var mycanvas = document.querySelector('#mycanvas');
var ctx = mycanvas.getContext('2d');
var w = 200, h = 200;
mycanvas.width = w;
mycanvas.height = h;

var grd=ctx.createLinearGradient(0,0,w,0);
grd.addColorStop(0,"#5f2c82");
grd.addColorStop(1,"#49a09d");

input.addEventListener('keyup',function(e){
  var v = e.target.value;
  ctx.clearRect(0,0,w,h);
  
  ctx.fillStyle=grd;
	ctx.fillRect(0,0,w,h);
  ctx.fillStyle='#FFF';
  ctx.fillText(v, 10, 50);
});