Javascript：通过给出点绘制动画线

我得到了一些代码来一个接一个地画动画。但在动画开始之前，第一行是可见的。请让我知道在下面画线的代码中要更改什么

我还没有提供足够的细节来说明我希望它做什么，稍后我会补充一些

$（文档）.ready（函数（）{
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
功能特征1（画布、进度、持续时间、延迟）{
控制台日志（“c1”+进度）；
延迟=延迟| | 1；
var ctx=canvas.getContext（'2d'）；
调试器；
如果（进度<持续时间）{
canvas.strokeStyle=“黑色”；
ctx.beginPath（）；
ctx.moveTo（1,13）；
ctx.lineTo（1*（（进度+1）/持续时间），30）；
ctx.stroke（）；
ctx.closePath（）
setTimeout（函数（）{
字符1（画布、进度+1、持续时间、延迟）；
}，延误）；
}否则{
调试器；
$（document.body）.trigger（“Character1Completed”）；
}
}
//开始绘图
字符1（画布，0，30，33）；
});

您的浏览器不支持HTML5画布标记。
发布一个fiddle可能会帮助其他人快速理解问题，就像下面的fiddle一样，如果您尝试运行上面的代码，它会起作用。但线条在动画开始之前是可见的。上面的小提琴工作正常，线条在动画开始之前是不可见的。那个小提琴工作正常。但我正试图以同样的方式去做。在我的代码中，行是可见的。