Javascript 如何实现js笔划代码而不是CSS笔划

我正在尝试为我的模因制作网站实现文本笔划。对于英文字体来说是不错的，但对于非英文字体来说效果不好，因为css轮廓笔划是从文本内部而不是从外部进入的

在测试了许多css技巧之后，我意识到css无法实现我所需的笔划文本。我已经工作了很多小时，仍然无法成功实现我想要的

下面是我的带有css笔划的网站代码&我想实现类似于此笔划文本的代码

$（文档）.ready（函数（）{
//画布相关变量
canvas=document.getElementById（“mm canvas”）；
ctx=canvas.getContext（“2d”）；
imageObj=新图像（）；
maxFontSize=60；
最大宽度=$（'#meme canvas'）。innerWidth（）-20；
最大高度=最大宽度；
imageObj.onload=函数（）{
宽度=图像对象宽度；
高度=图像对象高度；
如果（宽度>高度）{
如果（宽度>最大宽度）{
高度*=最大宽度/宽度；
宽度=最大宽度；
}
}
否则{
如果（高度>最大高度）{
宽度*=最大高度/高度；
高度=最大高度；
}
}
画布宽度=宽度；
canvas.height=高度；
draw（）；
};
imageObj.src=$（canvas.data（'image'）；
$（document）.on（'keyup'，'.mm text'，function（））{
draw（）；
});
$（“#添加文本框”）。单击（函数（）{
var，该值=$（此值）；
var makeid=makeid（）；
在（“”）之前的.parent（）；
$（'.reshable:last child'）。在（''）之前；
$（'input[data position=“”+makeid+“]”]'）.next（）.find（'.font'）.spectrum({
单击Outfireschange：true，
});
$（'input[data position=“”+makeid+“]”]'）.next（）.find（'.stroke'）.spectrum({
单击Outfireschange：true，
});
$（“#”+makeid）。可调整大小({
安全壳：“.mm安全壳”，
停止：函数（）{draw（）；}
}).拖拉({
安全壳：'.mm包含'，
停止：函数（）{draw（）；}
});
});
$（'.mm contain'）.hover（函数（）{
$（'.resizable'）.toggleClass（'ui-state-active'）；
});
$（“.resizable”）.resizable({
安全壳：“.mm安全壳”，
停止：函数（）{draw（）；}
}).拖拉({
安全壳：'.mm包含'，
停止：函数（）{draw（）；}
});
$（“.font”）.spectrum({
单击Outfireschange：true，
});
$（“.stroke”）.spectrum({
单击Outfireschange：true，
});
$（文档）.on（'change'，'font、.stroke'，draw）；
});
函数makeId（）{
var text=“”；
变量可能=“abcdefghijklmnopqrstuvwxyz0123456789”；
对于（变量i=0；i<5；i++）
text+=可能的.charAt（Math.floor（Math.random（）*可能的.length））；
返回文本；
}
//清除画布并重新绘制所有文本
函数绘图（）{
ctx.save（）；
ctx.textAlign=“中心”；
ctx.lineWidth=1；
ctx.shadowBlur=1；
ctx.clearRect（0，0，宽度，高度）；
ctx.drawImage（imageObj，0，0，宽度，高度）；
$（'.mm text'）。每个（函数（索引）{
var，该值=$（此值）；
var text=that.val（）.trim（）；
var dataPos=that.attr（'data-position'）；
var textboxWidth=$（'#'+dataPos）.innerWidth（）；
attr（'data-fontsize'，maxFontSize）；
var textFont=that.attr（'data-fontsize'）；
ctx.font=textFont+“px影响”；
var linest=片段文本（text，textboxWidth textFont）；
如果（linest.length==1）{
//maxFontSize=60；
attr（'data-fontsize'，maxFontSize）；
}
如果（linest.length==2）{
//maxFontSize=50；
attr（'data-fontsize'，50）；
}
如果（linest.length==3）{
//maxFontSize=40；
attr（'data-fontsize'，40）；
}
如果（直线长度>=4）{
//maxFontSize=30；
attr（'data-fontsize'，30）；
}
textFont=that.attr（'data-fontsize'）；
ctx.font=textFont+“px影响”；
ctx.fillStyle=that.next（）.find（'.font'）.val（）
ctx.shadowColor=that.next（）.find（'.stroke'）.val（）；
ctx.strokeStyle=that.next（）.find（'.stroke'）.val（）；
变量行=片段文本（文本，textboxWidth textFont）；
$（'#'+dataPos）.css（'height'，parseInt（lines.length*textFont）+'px'）；
行。forEach（函数（行，i）{
ctx.fillText（line.toUpperCase（）、parseInt（$（'#'+dataPos）.position（）.left+（textboxWidth/2））、parseInt（$（'#'+dataPos.position（）.top+（i+1）*textFont）；
strokeText（line.toUpperCase（）、parseInt（$（'#'+dataPos.position（）.left+（textboxWidth/2））、parseInt（$（'#'+dataPos.position（）.top+（i+1）*textFont）；
});
});
}
函数碎片文本（文本，最大宽度）{
var words=text.toString（）.split（“”），
行=[]，
第“”行；
if（ctx.measureText（text）.width0）{
while（ctx.measureText（字[0]）.width>=maxWidth）{
var tmp=字[0]；
字[0]=tmp.slice（0，-1）；
如果（单词长度>1）{
字[1]=tmp.slice（-1）+字[1]；
}否则{
字推（tmp.slice（-1））；
}
}
if（ctx.measureText（行+字[0]）。宽度<最大宽度）{
line+=words.shift（）+“”；
}否则{
推（线）；
第“”行；
}
if（words.length==0）{
推（线）；
}
}
回流线；
}
函数saveCanvas（）
{
温度宽度=最大宽度；
温度高度=最大高度；
最大宽度=500；
最大高度=最大宽度；
draw（）；
var canvas=document.getElementById（“mm canvas”）；
ctx.font='12px Arial'；
ctx.fillStyle='#fff'；
ctx.shadowBlur=2；
ctx.shadowColor='#000'；
ctx.textAlign=“左”；
ctx.fillText（水