JSFiddle - React, Tailwind, and code Playground

by s sc

HTML

<textarea id='atext' rows='5'>Transform all 
this different lines
into one single
image!</textarea>
<button id="generate">
Generate image
</button>
<br/>
<canvas id='aCanvas' height=200 width=200 style='display:none'></canvas>
<img id='image' style="background-color:red">

JavaScript

var ctx = document.getElementById('aCanvas').getContext('2d');
var imageElem = document.getElementById('image');
var atext = document.getElementById('atext');

document.getElementById('generate').addEventListener('click', function (){
 
	//split text into lines and find the longest one
  var lines = atext.value.split("\n");
  ctx.font = "30px Verdana"
  let longest = lines.reduce((r, e) => r.length < e.length ? e : r, "");
  ctx.canvas.width = ctx.measureText(longest).width + 90;
  ctx.font = "30px Verdana"
  for(var i=0; i<lines.length; i++){
    	ctx.fillText(lines[i], 20, 40*i +40);
  }
  imageElem.src = ctx.canvas.toDataURL();
  console.log(imageElem.src);
}, false);