JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="arabic" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="hindi" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="bengali" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

CSS

canvas {
  background: #FFFF00;
}

JavaScript

var arabic = document.getElementById("arabic");
var ctx = arabic.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 10;
ctx.strokeText(" اَلْعَرَبِيَّةُ ", 10, 100);
ctx.globalCompositeOperation = "destination-out";
ctx.fillText(" اَلْعَرَبِيَّةُ ", 10, 100);


var	hindi = document.getElementById("hindi");
var ctx = hindi.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 10;
ctx.strokeText("हिन्दी", 10, 100);
ctx.globalCompositeOperation = "destination-out";
ctx.fillText("हिन्दी", 10, 100);

var bengali = document.getElementById("bengali");
var ctx = bengali.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 10;
ctx.strokeText("বেঙ্গলি", 10, 100);
ctx.globalCompositeOperation = "destination-out";
ctx.fillText("বেঙ্গলি", 10, 100);