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);

var canvas2 = document.getElementById('canvas2');
var ctx2 = canvas2.getContext('2d');
ctx2.font = '30pt Arial';
var x = 10;
for(var i = 0; i < text.length; i++)
{
    var 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 node = document.createTextNode(c);
    div.appendChild(node);
}