波斯（中东）字符串以Canvas元素中的数字开头

我的页面有一个画布，我想在其中添加一些文本

var txt1=‘فاسی’；
var txt2=‘۴۷’；
var myText=txt1+txt2；
//var myText=txt2+txt1；
var c=document.getElementById（'myCanvas'）；
var ctx=c.getContext（“2d”）；
ctx.width=400；
ctx.height=400；
ctx.fillStyle=“#777”；
ctx.fillRect（0,0400）；
ctx.font=“正常50px塔荷马”；
ctx.fillStyle=“#FFF”；
ctx.direction=“rtl”；
ctx.fillText（myText，70110）；

是，ctx.direction目前仅在chrome和Safari中受支持：

控制两个字符串的呈现顺序的解决方案是在缓冲区画布上绘制两部分中的一部分，然后在第一个呈现文本的末尾绘制此缓冲区画布

var txt=[“فاسی”、“۴۷”]；
var c=document.getElementById（'myCanvas'）；
var ctx=c.getContext（“2d”）；
c、 宽度=400；
c、 高度=400；
ctx.fillStyle=“#777”；
ctx.fillRect（0,0400）；
//我们的缓冲画布
var can=c.cloneNode（真）；
var ctx2=can.getContext（'2d'）；
ctx.font=“正常50px塔荷马”；
ctx.fillStyle=“#FFF”；
ctx2.font=ctx.font
ctx2.fillStyle=ctx.fillStyle；
ctx2.fillText（txt[1]，0110）；
//获取第一个文本的宽度
var textWidth=ctx.measureText（txt[0]）.width；
ctx.fillText（txt[0]，70110）；
//在文本末尾绘制缓冲区画布
ctx.drawImage（can，70+文本宽度，0）；
//清除缓冲区
ctx2.clearRect（0,0，c.宽度，c.高度）；
//倒序
ctx2.fillText（txt[0]，0210）；
//获取第一个文本的宽度
var textWidth=ctx.measureText（txt[1]）.width；
ctx.fillText（txt[1]，70210）；
//在文本末尾绘制缓冲区画布
ctx.drawImage（can，70+文本宽度，0）