Javascript 如何使用signature_pad.js在画布上使用db中存储的坐标显示草图

我想知道如何使用存储在画布上db中的坐标显示草图，并能够使用signature_pad.js进行编辑。我能够从数据库中检索到坐标，但不知道如何显示它。下面是我在signature_pad.js上的代码

• 签名_pad.js是为szimek创建的

• 我还检索签名_pad.js中的坐标数据

（函数（根，工厂）{
if（typeof define=='function'&&define.amd）{
//AMD。除非设置了amdModuleId，否则注册为匿名模块
定义（[]，函数（）{
返回（根['SignaturePad']=factory（））；
});
}else if（导出的类型==='object'）{
//Node.不适用于严格的CommonJS，但
//仅支持module.exports的CommonJS类环境，
//像节点。
module.exports=工厂（）；
}否则{
根['SignaturePad']=factory（）；
}
}（这个，功能（）{
var SignaturePad=（函数（文档）{
“严格使用”；
var SignaturePad=函数（画布、选项）{
var self=这个，
opts=选项|{}；
this.velocityFilterWeight=opts.velocityFilterWeight | | 0.7；
this.minWidth=opts.minWidth | | 0.5；
this.maxWidth=opts.maxWidth | | 2.5；
this.dotSize=opts.dotSize | |函数（）{
返回（this.minWidth+this.maxWidth）/2；
};
this.penColor=opts.penColor | |黑色；
this.backgroundColor=选择.backgroundColor | |“rgba（0,0,0,0）”；
this.onEnd=opts.onEnd；
this.onBegin=opts.onBegin；
这个._canvas=canvas；
这个._ctx=canvas.getContext（“2d”）；
var yes=JSON.parse（Page.fields.MARK.getValue（））；
//我们需要添加这些内联的，这样他们就可以解除绑定，而仍然有
//对“self”的访问我们可以使用u.bind，但不值得添加依赖项
此._handleMouseDown=函数（事件）{
if（event.which==1）{
self.\u mouseButtonDown=true；
自冲程开始（事件）；
}
};
此._handleMouseMove=函数（事件）{
如果（自身.\u鼠标按钮）{
自我更新（事件）；
}
};
此._handleMouseUp=函数（事件）{
if（event.which==1&&self.\u mouseButtonDown）{
self.\u mouseButtonDown=false；
自我激励（事件）；
}
};
此._handleTouchStart=函数（事件）{
if（event.targetTouches.length==1）{
var touch=event.changedtouchs[0]；
self._strokebeagin（触摸）；
}
};
此._handleTouchMove=函数（事件）{
//防止滚动。
event.preventDefault（）；
var touch=event.targetTouches[0]；
自触发更新（触摸）；
};
此._handleTouchEnd=功能（事件）{
var wasCanvasTouched=event.target==self.\u canvas；
如果（wascanvastouch）{
event.preventDefault（）；
自我激励（事件）；
}
};
这个。_handleMouseEvents（）；
这个；
};
SignaturePad.prototype.clear=函数（）{
var ctx=这个，
画布=这个；
ctx.fillStyle=this.backgroundColor；
clearRect（0，0，canvas.width，canvas.height）；
ctx.fillRect（0，0，canvas.width，canvas.height）；
这个；
};
SignaturePad.prototype.toDataURL=函数（图像类型，质量）{
var canvas=这个；
var mime=“image/mark.png”；
Page.fields.IMGBINARY.setValue（this.canvas.toDataURL（mime））；
Page.fields.IMGBINARY.setInternalValue（this.canvas.toDataURL（mime））；
返回canvas.toDataURL.apply（canvas，参数）；
};
/*SignaturePad.prototype.fromDataURL=函数（dataUrl）{
var self=这个，
image=新图像（），
比率=window.devicePixelRatio | | 1，
宽度=这个。宽度/比率，
高度=此高度/比率；
这个；
image.src=dataUrl；
image.onload=函数（）{
self._ctx.drawImage（图像，0，0，宽度，高度）；
};
这个._isEmpty=false；
};*/
SignaturePad.prototype.\u strokeUpdate=函数（事件）{
var point=此。_createPoint（事件）；
此点（点）；
};
SignaturePad.prototype.\u strokeBegin=函数（事件）{
这个；
此._strokeUpdate（事件）；
if（typeof this.onBegin=='function'）{
此.onBegin（事件）；
}
};
SignaturePad.prototype.\u strokeDraw=函数（点）{
var ctx=这个，
dotSize=typeof（this.dotSize）==“函数”？this.dotSize（）：this.dotSize；
ctx.beginPath（）；
此._绘图点（点x、点y、点尺寸）；
ctx.closePath（）；
ctx.fill（）；
};
SignaturePad.prototype.\u strokeEnd=函数（事件）{
var canDrawCurve=this.points.length>2，
点=此。点[0]；
如果（！canDrawCurve&&point）{
本图为冲程图（点）；
}
if（typeof this.onEnd=='function'）{
这是一个事件；
}
};
SignaturePad.prototype.\u handleMouseEvents=函数（）{
这是。_mouseButtonDown=false；
这个._canvas.addEventListener（“mousedown”，这个._handleMouseDown）；
这个._canvas.addEventListener（“mousemove”，这个._handleMouseMove）；
文件。添加文件列表（“鼠标”，本._handleMouseUp）；
};
SignaturePad.prototype.\u handleTouchEvents=函数（）{
//将触摸事件传递到移动IE11和Edge上的canvas元素。
此._canvas.style.msTouchAction='none'；