JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

CSS

body { background:#eee; margin:2em }
canvas { background:#fff; border:1px solid #ccc; display:block; margin:2em auto }

JavaScript

var c = $('canvas')[0];
c.width = c.height = 400;
var ctx = c.getContext('2d');


ctx.fillStyle = "#000000";
ctx.textBaseline = "top";
ctx.textAlign = "left";
ctx.font = "normal 18px Segoe";


var text = "ئجإلك  في hello ٯ ";

ctx.fillText(text, 100, 100);