JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<script src="https://www.google.com/jsapi"></script>
<link href='https://fonts.googleapis.com/css?family=NTR' rel='stylesheet' type='text/css'>

<textarea id="top" style="width:600px;height:20px"></textarea>
<br><br>
<canvas id="target"></canvas>

CSS

body {
    overflow-y:hidden;
font-family: 'NTR', sans-serif;
}

canvas{
    border: 1px black solid;
}



#target,#target2
{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    font-size:35px;
    width:500px;
word-wrap: break-word;
    
}

JavaScript

// Load the Google Transliterate API
      google.load("elements", "1", {
            packages: "transliteration"
          });

      function onLoad() {
        var options = {
            sourceLanguage:
                google.elements.transliteration.LanguageCode.ENGLISH,
            destinationLanguage:
                [google.elements.transliteration.LanguageCode.TELUGU],
        //shortcutKey: 'ctrl+g',
            transliterationEnabled: true
        };

        // Create an instance on TransliterationControl with the required
        // options.
        var control =
            new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textbox with id
        // 'transliterateTextarea'.
        control.makeTransliteratable(['top']);
                  control.makeTransliteratable(['bottom']);

      }
      google.setOnLoadCallback(onLoad);
var tCtx = document.getElementById('target').getContext('2d'),
    imageElem = document.getElementById('image');

document.getElementById('top').addEventListener('keyup', function (){
    tCtx.canvas.width = tCtx.measureText(this.value).width;
    tCtx.fillText(this.value, 0, 10);
    imageElem.src = tCtx.canvas.toDataURL();
    console.log(imageElem.src);
}, false);