JSFiddle - React, Tailwind, and code Playground

HTML

<div>Test 1: Draw non-english text on canvas</div>
<canvas id="canvas1" width="700" height="200"></canvas>
<br/>
<div>Test 2: Draw non-english text character by character on canvas (s[i] used to get ith character)</div>
<canvas id="canvas2" width="700" height="200"></canvas>
<br/>
<div>Test 3: Create a text node for each s[i]</div>
<div id="div"></div>

CSS

#div
{
    font: 30pt Arial;
}

JavaScript

var text = 'हिंदी में लिखना बहुत आसान है क्रांतिकारी';
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
ctx.font = '30pt Arial';
ctx.fillText(text, 10, 100);

//character codes for diacritical marks. this is most definitely not an exhaustive list of 
//diacritics in hindi or all languages for that matter; it is just a list of diacritics 
//that appear in the sample text. 
var dia = [2367, 2381, 2368, 2375, 2306, 2366, 2369, 2376];

var canvas2 = document.getElementById('canvas2');
var ctx2 = canvas2.getContext('2d');
ctx2.font = '30pt Arial';
var x = 10;
var combined = [];

for(var i = 0; i < text.length; i++)
{
    var c = text[i];
    var cCode = c.charCodeAt(0);
    var next = null;
    var nextCode = -1;           
    while(i < text.length - 1 && dia.indexOf(text[i + 1].charCodeAt(0)) >= 0) {
        i++;
        c += text[i];
    }   

    ctx2.fillText(c, x, 100);
    x += ctx2.measureText(c).width;    
}

var div = document.getElementById('div');
for(var i = 0; i < text.length; i++)
{
    var c = text[i];
    var cCode = c.charCodeAt(0);
    var next = null;
    var nextCode = -1;           
    while(i < text.length - 1 && dia.indexOf(text[i + 1].charCodeAt(0)) >= 0) {
        i++;
        c += text[i];
    }   

    var node = document.createTextNode(c);
    div.appendChild(node);
}