🐛 H5环境下 canvas 的原点坐标被重置了, 只有小程序里面是正常的

**问题描述**

1. 通过`ctx.translate(100, 100)`设置原点坐标为(100, 100), **并绘制了一个红色的点**
2. H5环境下使用`new Image()`加载图片, 小程序环境下使用`canvas.createImage()`加载图片
3. 图片`onload`加载成功之后, **基于原点绘制了一个蓝色的点**
4. 结果发现`uni-app`编译的H5环境下, 原点坐标被意外的重置了


**复现步骤**

```html

export default {
mounted () {
uni.createSelectorQuery().in(this).select('#my-canvas').fields({
node: true, size: true
}).exec((res) => {
// #ifdef H5
// H5 环境下手动获取 canvas 节点
res[0].node = document.querySelector('#my-canvas canvas')
// #endif
const canvas = res[0].node
// 获取canvas上下文
const ctx = canvas.getContext('2d')
// 设置原点坐标为(100, 100)
ctx.translate(100, 100)
// 正常的原点坐标是(100, 100), 这里用红色来标记
this.drawPoint(ctx, 20, 'red')

// ----------- 下面开始复现bug ----------------------------
let img
// H5 环境下才能使用 new Image()
// #ifdef H5
img = new Image()
// #endif
// 小程序环境下使用 canvas.createImage
// #ifdef MP
img = canvas.createImage()
// #endif
img.onload = () => {
/**
* 绘制一个蓝色的点, 此时 H5 环境下会出现 bug
* H5 环境下的原点坐标被重置了
* 但是小程序环境下的原点坐标没变, 才是正常的
*/
this.drawPoint(ctx, 10, 'blue')
}
// 随便找了个图片
img.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png'
})
},
methods: {
// 基于 canvas 的原点坐标绘制一个点
drawPoint (ctx, radius, color) {
ctx.beginPath()
ctx.fillStyle = color
ctx.arc(0, 0, radius, 0, 7)
ctx.fill()
ctx.closePath()
}
}
}

```

**预期结果**

**正常的渲染效果应该是两个点重合, 就像是小程序里面的渲染效果一样**

**实际结果**


**系统信息:**
- 发行平台: H5平台
- 操作系统: win10 / mac
- HBuilderX版本: 3.2.2.20210818
- uni-app版本 [如使用Vue-cli创建/运行项目，则提供`npm run info`的运行结果]
- 设备信息: 谷歌浏览器

**补充信息**

无