Javascript 为画布上的实时雕刻文本添加填充

我正在研究一种在手镯上实时雕刻文字的解决方案，使用画布覆盖

我的小提琴在这里：

var first=true；
startIt（）；
函数startIt（）
{
canvasDiv=document.getElementById（'canvasDiv'）；
canvasDiv.innerHTML=''；//用于IE
canvas=document.getElementById（'layer0'）；
ctx=canvas.getContext（'2d'）；
ctx.fillStyle=“绿色”；
ctx.font=“20px快递新”；
curve=document.getElementById（'curve'）；
curveText=document.getElementById（'text'）；
$（曲线）.keyup（函数（e）{changeCurve（）；}）；
$（curveText）.keyup（函数（e）{changeCurve（）；}）；
如果（第一）
{
改变曲线（）；
第一个=假；
}
}
函数变化曲线（）
{
点=曲线.value.split（'，'）；
if（points.length==8）
drawStack（）；
}
函数drawStack（）
{
Ribbon={maxChar:50，startX:points[0]，startY:points[1]，
control1X:点[2]，control1Y:点[3]，
control2X:点[4]，control2Y:点[5]，
endX:points[6]，endY:points[7]}；
clearRect（0，0，canvas.width，canvas.height）；
ctx.save（）；
ctx.beginPath（）；
ctx.moveTo（Ribbon.startX，Ribbon.startY）；
ctx.bezierCurveTo（Ribbon.control1X，Ribbon.control1Y，
Ribbon.control2X，Ribbon.control2Y，
Ribbon.endX，Ribbon.endY）；
ctx.stroke（）；
ctx.restore（）；
FillRibbon（curveText.value，Ribbon）；
}
函数FillRibbon（文本，Ribbon）
{
var textCurve=[]；
var ribbon=text.substring（0，ribbon.maxChar）；
var曲线样本=1000；
xDist=0；
var i=0；
对于（i=0；i

。产品图像容器{
宽度：400px；
高度：400px；
位置：相对位置；
}
帆布{
位置：绝对位置；
排名：0；
}
.产品形象{
宽度：100%
}
.雕刻区{
位置：相对位置；
}

试着这样做：

var first=true；
var productImage=document.getElementsByClassName（'productImage'）[0]；
var curveOffset=document.getElementById（'offset'）；
var fontSize=document.getElementById（'fontSize'）；
$（productImage）.on（'load'，function（））{
startIt（）；
});
函数startIt（）
{
canvasDiv=document.getElementById（'canvasDiv'）；
canvasDiv.innerHTML=''；//用于IE
canvas=document.getElementById（'layer0'）；
ctx=canvas.getContext（'2d'）；
ctx.fillStyle=“绿色”；
curve=document.getElementById（'curve'）；
curveText=document.getElementById（'text'）；
比例=productImage.naturalWidth/400；
$（曲线）.keyup（函数（e）{changeCurve（）；}）；
$（curveText）.keyup（函数（e）{changeCurve（）；}）；
$（curveOffset）.on（'change'，changeCurve）；
$（fontSize）.on（'change'，changeCurve）；
如果（第一）
{
改变曲线（）；
冷杉