小程序中使用canvas绘制海报时部分文本坐标错位

在小程序开发时，需要用canvas绘制一张海报，但是在绘制时，经常出现部分文本x坐标错位的情况，对比如下：

左边的正常的效果，右边是错位的情况，其中错位的图中，删除线的坐标貌似是正常的，这张图的其他部分也都正常，
有遇到过类似问题的吗，请问该怎么解决啊？

以下是部分代码

// 头像  
ctx.arc(316,53,36,0,Math.PI*2,false)  
ctx.clip()  
ctx.drawImage(path,280,17,73,73)  
ctx.restore()  
ctx.beginPath()  
// 商品名称  
ctx.font = 'bold 30px Arial'  
ctx.fillStyle = '#2A2A2A'  
ctx.fillText(item.goodName,27,690)  
// 商品价格  
ctx.font = '45px Arial'  
ctx.fillStyle = '#FE1B00'  
const price = '￥'+item.price  
let metric1 = ctx.measureText(price)  
ctx.fillText(price,22,750)  
//商品原价  
ctx.font = '35px Arial'  
ctx.fillStyle = '#6D6D6D'  
const origin = '￥'+'900'  
// 删除线  
const x = 22+metric1.width+20  
const metrics = ctx.measureText(origin)  
ctx.fillText(origin,x,750)  
ctx.moveTo(x,738)  
ctx.lineTo(x+metrics.width, 738);  
ctx.stroke();  
// 商品备注  
ctx.font = '18px Arial'  
ctx.fillStyle = '#999999'  
_this.drawText(ctx,item.introduction,27,760,400)// 自定义方法，文字换行显示  
ctx.closePath()