开发者工具上测试没问题，在真机测试上打开页面也是正常的，如下图

但是使用

context.draw(false,function (res){
	console.log('draw',res)
	//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
	setTimeout(function () {
    	     wx.canvasToTempFilePath({
    		canvasId: 'mycanvas',
		success: function (res) {
			var tempFilePath = res.tempFilePath;
			that.imageUrl = tempFilePath
			console.log(tempFilePath)				
			},
			fail: function (res) {
				console.log(res);
			}
		});
	}, 200);
});
下载
wx.saveImageToPhotosAlbum({
	filePath: that.imageUrl,
        success(res) {
        	uni.hideLoading();
      	        wx.showModal({
      			  content: '图片已保存到相册，赶紧晒一下吧~',
			  showCancel: false,
			  confirmText: '好的',
			  confirmColor: '#333',
			  success: function (res) {
			       if (res.confirm) {
			          console.log('用户点击确定')      
			        }
			  },
                          fail:function(res){
                                  console.log(11111)
                	  }
                })
        }
})
下载图片后文字的位置都偏移了

请问怎么解决