【报Bug】createCanvasContext在微信小程序中不兼容

示例代码：

<template>
<view class="goodsposter">
<view class="goodsposter_cen">
<view class="goodsposter_cen_t">
<canvas canvasId="goodsci" id="goodsci" type="2d" @error="canvasIdErrorCallback"></canvas>
</view>
<view class="goodsposter_cen_b">
<view class="goodsposter_cen_b_i" @click="onDownloadPoster">
下载海报
</view>
<view class="goodsposter_cen_b_i">
分享海报
</view>
</view>
</view>
</view>
</template>
<script setup>
import { onMounted, ref, reactive, defineProps, getCurrentInstance, nextTick } from 'vue'
const {proxy} = getCurrentInstance()

const props = defineProps({
info: {
type: Object
}
})
onMounted(()=>{
let ctx = uni.createCanvasContext("goodsci",proxy)
console.log("这是canvas",ctx)
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

})
const onDownloadPoster=()=>{

}
const canvasIdErrorCallback=(e)=>{
console.error(e.detail.errMsg)
}
</script>
<style scoped lang="scss">
.goodsposter {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;

&_cen {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    width: 80%;  
    background-color: #fff;  
    border-radius: 10rpx;  

    &_t {  
        padding: 20rpx;  
        text-align: center;  

        // canvas {  
        //  width: 100%;  
        //  height: auto;  
        // }  
    }  

    &_b {  
        display: flex;  
        justify-content: space-around;  
        padding: 20rpx;  

        &_i {  
            flex-grow: 1;  
            text-align: center;  
            color: $text-act-color;  
        }  
    }  
}  

}
</style>

操作步骤：

在components里面创建一个goods-poster.vue文件，将代码复制进入，然后在页面中引用该组件，然后运行到微信小程序

预期结果：

显示一个红色矩形

实际结果：

组件白屏