拍照给图片加水印 canvas 第一次绘图失败，第二次正常

拍照或选择图片，第一次空白，第二次拍照或选择正常
HBuilderX（2.9.8.20201110）
经测试
安卓APP和PC浏览器出现上述问题
微信小程序无此问题
IOS未测试
代码如下，请求帮助

<template>  
    <view class="content">  
        <canvas class="canvas" :style="{ width: w, height: h }" canvas-id="firstCanvas"></canvas>  
        <button @click="getimg">获取图片</button>  
        <image mode="aspectFill" :src="src" @click="preview"></image>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            title: 'Hello',  
            w: 0,  
            h: 0,  
            imgarr: [],  
            NowDate: '',  
            src: ''  
        };  
    },  
    onLoad() {  
        this.MyDataNow();  
    },  
    methods: {  
        MyDataNow() {  
            let date = new Date();  
            let seperator1 = '-';  
            let year = date.getFullYear();  
            let month = date.getMonth() + 1;  
            let strDate = date.getDate();  
            let Hours = date.getHours();  
            let Min = date.getMinutes();  
            if (month >= 1 && month <= 9) {  
                month = '0' + month;  
            }  
            if (strDate >= 0 && strDate <= 9) {  
                strDate = '0' + strDate;  
            }  
            if (Hours >= 0 && Hours <= 9) {  
                Hours = '0' + Hours;  
            }  
            if (Min >= 0 && Min <= 9) {  
                Min = '0' + Min;  
            }  
            let currentdate = year + seperator1 + month + seperator1 + strDate + ' ' + Hours + ':' + Min;  
            this.NowDate = currentdate;  
        },  
        preview() {  
            uni.previewImage({  
                urls: [this.src],  
                current: 0  
            });  
        },  
        //获取图片  
        getimg() {  
            let that = this;  
            uni.chooseImage({  
                count: 1, //从相册中都可选择的图片个数  
                success: res => {  
                    console.log(res);  
                    that.setimg(res.tempFilePaths[0]);  
                }  
            });  
        },  
        //获取图片信息  

        setimg(e) {  
            uni.showLoading({  
                title: '水印添加中...',  
                mask: true  
            });  
            let date = this.NowDate;  
            let that = this;  
            const ctx = uni.createCanvasContext('firstCanvas', this);  
            uni.getImageInfo({  
                src: e,  
                success: res => {  
                    console.log(res);  
                    that.w = res.width / 2 + 'px';  
                    that.h = res.height / 2 + 'px';  
                    //初始化画布  
                    ctx.fillRect(0, 0, that.w, that.h);  
                    //将图片src放到cancas内，宽高为图片大小  
                    ctx.drawImage(res.path, 0, 0, res.width / 2, res.height / 2);  

                    ctx.setFontSize(70);  
                    ctx.setFillStyle('#ffffff');  
                    let textToWidth = (res.width / 2) /5;  
                    let textToHeight = (res.height / 2) /2;  
                    ctx.fillText(date, textToWidth, textToHeight);  
                    ctx.draw(false, () => {  
                        setTimeout(() => {  
                            uni.canvasToTempFilePath({  
                                //将画布中内容转成图片，即水印与图片合成  
                                canvasId: 'firstCanvas',  
                                success: res => {  
                                    console.log(res);  
                                    that.src = res.tempFilePath;  
                                    uni.hideLoading();  
                                }  
                            });  
                        }, 1000);  
                    });  
                }  
            });  
        }  
    }  
};  
</script>  

<style>  
.content {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
}  

.logo {  
    height: 200rpx;  
    width: 200rpx;  
    margin-top: 200rpx;  
    margin-left: auto;  
    margin-right: auto;  
    margin-bottom: 50rpx;  
}  

.text-area {  
    display: flex;  
    justify-content: center;  
}  

.title {  
    font-size: 36rpx;  
    color: #8f8f94;  
}  
.canvas {  
    border: 2rpx solid pink;  
    background: pink;  
    top: 200%;  
    left: 0;  
    /* background: red;*/  
    width: 100%;  
    height: 100%;  
}  
</style>