uniapp中把canvas做成组件的方式，在微信小程序不能正常显示

canvas直接放到页面中，微信小程序可以正常显示，但是做成组件，再导入组件就不行，无法显示图像，但是组件方式在H5中可以正常显示图形，请教大家可能是哪里的问题？

<template>  
  <view class="layout">  
    <view class="fill"></view>  
    <my-canvas :height="canvasHeight"></my-canvas>  
  </view>  
</template>  

<script setup>  
import { ref } from 'vue';  

const canvasHeight = ref(3200);  
</script>  

<style lang="scss" scoped>  
.layout {  
  display: flex;  
  flex-direction: column;  
  padding: 30rpx;  
  height: 100vh;  
  .fill {  
    height: 50%;  
    background: #ccc;  
  }  
}  
</style>  

<template>  
    <view class="container" :style="{ height: `${windowHeight}rpx`}">  
      <canvas  
        canvas-id="myCanvas"  
        :style="{ height: `${height}px` }"  
        @touchstart="handleTouchStart"  
        @touchmove="handleTouchMove"  
        @touchend="handleTouchEnd"  
      ></canvas>  
    </view>  
</template>  

<script setup>  
import { onLoad, onReady } from '@dcloudio/uni-app';  
import { onMounted, ref } from 'vue';  

const props = defineProps({  
  height: {  
    type: Number,  
    default: 3200,  
  },  
  windowHeight: {  
    type: Number,  
    default: 820,  
  },  
});  

const handleTouchStart = (e) => {  
  // 处理触摸开始事件  
};  

const handleTouchMove = (e) => {  
  // 处理触摸移动事件  
};  

const handleTouchEnd = (e) => {  
  // 处理触摸结束事件  
};  

onMounted(() => {  
  drawContent();  
});  

// onLoad(() => {  
//   drawContent();  
// });  
// onReady(() => {  
//   drawContent();    
//   console.log('页面渲染完成');    
// });  

const drawContent = () => {  
  // 在这里绘制你的内容  
  const ctx = uni.createCanvasContext("myCanvas");  
  const offsetY = 400;  
  // begin path  
  ctx.rect(10, offsetY + 10, 100, 30);  
  ctx.setFillStyle("yellow");  
  ctx.fill();  

  // begin another path  
  ctx.beginPath();  
  ctx.rect(10, offsetY + 40, 100, 30);  

  // only fill this rect, not in current path  
  ctx.setFillStyle("blue");  
  ctx.fillRect(10, offsetY + 70, 100, 30);  

  ctx.rect(10, offsetY + 100, 100, 30);  

  // it will fill current path  
  ctx.setFillStyle("red");  
  ctx.fill();  
  ctx.draw();  
  console.log('绘制完成');  
};  
</script>  

<style lang="scss" scoped>  
.container {  
  width: 100%;  
  overflow: auto;  
  box-shadow: inset 0 0 10px #ccc;  
  canvas {  
    width: 100%;  
    // border: 1rpx solid #ff0000;  
  }  
}  
</style>