JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<canvas id='textCanvas' height=20></canvas>
<img id='image'>
<br>
<span id='text2' style="font-size:30px;" >Mārōghghhgh </span>

JavaScript

var tCtx = document.getElementById('textCanvas').getContext('2d'),
    imageElem = document.getElementById('image');
 var textElem = document.getElementById("text2");



   tCtx.canvas.width =  tCtx.measureText(textElem.textContent).width + 50;
   tCtx.canvas.height = 50;
   tCtx.font = "20px Open Sans ";
    tCtx.fillText(textElem.textContent,10,50);
    imageElem.src = tCtx.canvas.toDataURL();
    console.log(imageElem.src);