微信小程序中，在组件中的canvas为何绘制图片没有效果

Question

 <view class='givefans_history'>
   <wxclip>

    </wxclip> 
 </view>

这是我在主页面调用这个组件的结构

下面是组件代码

<!--components/wxclip/wxclip.wxml-->
<view class='wxclip' wx:if="{{WxclipShow}}">
  <view class='wxclip_canvaswrap'>
    <view class='wxclip_screenshot'></view>
    <canvas id='wxclip_canvas' class='wxclip_canvas' canvas-id='wxclip_canvas'></canvas>
  </view>
  <view class='wxclip_operation'>
    <view class='wxclip_operation_cancel'>取消</view>
    <view class='wxclip_operation_confirm'>确定</view>
  </view>
</view>

/* components/wxclip/wxclip.wxss */
.wxclip{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 999;
}
.wxclip_canvaswrap{
  width: 100%;
  height:90%;
  position: relative; 
}
.wxclip_screenshot{
  width: 464rpx;
  height: 746rpx;
  border:2px dashed #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -373rpx;
  margin-left: -232rpx;
}
.wxclip_canvas{
  display: block!important;
  width: 100%;
  height:100%;
  z-index: 9999; 
}
.wxclip_operation{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 16px;
}
.wxclip_operation_cancel{
  padding-left:50rpx; 
}
.wxclip_operation_confirm{
  padding-right:50rpx; 
}

// components/wxclip/wxclip.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    WxclipShow:true,//组件是否显示
    ImagePath:'',//本地图片路径
    windowWidth:'',//可用窗口宽
    windowHeight: '',//可用窗口高
    CanvasWidth: "",//画布宽
    CanvasHeight:'',//画布高
    ImageRatio:1,//传入图片宽高比 w/h 默认为1
  },
  created(){

  },
  ready(){
    // this.GetSystemInfo()
    let ctx = wx.createCanvasContext('wxclip_canvas')
    ctx.setFillStyle('red')
    ctx.fillRect(0, 0, 1500, 1000)
    ctx.draw()//这边绘制最简单的图形都没有效果
  },
  /**
   * 组件的方法列表
   */
  methods: {
 
  }
})

同样的代码在页面中绘制是有效果的，为什么在组件中绘制canvas没有任何效果呢？