如何实现canvas绘制的图形在页面加载完成就显示

下面是定义绘画上线文

var ctx = uni.createCanvasContext('myCanvas', this)

下面是在各个声明周期函数中的绘画
onReady（）中结果是页面加载的时候一闪而逝

onReady() {  
            ctx.beginPath()  
            ctx.arc(60, 60, 30, 0, 2 * Math.PI)  
            ctx.setFillStyle("#FF0000")  
            ctx.fill()  
            ctx.stroke()  
            ctx.draw()  
        },

onShow()结果是不显示这个红色的圆

onShow() {  
            ctx.beginPath()  
            ctx.arc(60, 60, 30, 0, 2 * Math.PI)  
            ctx.setFillStyle("#FF0000")  
            ctx.fill()  
            ctx.stroke()  
            ctx.draw()  
        }

onLoad()结果是不显示红色的圆

onLoad() {  
            ctx.beginPath()  
            ctx.arc(60, 60, 30, 0, 2 * Math.PI)  
            ctx.setFillStyle("#FF0000")  
            ctx.fill()  
            ctx.stroke()  
            ctx.draw()  
        }

现在来说唯一可以确定能显示的就是页面加载完毕后，点击页面中的某个按钮显示绘制的图形，可以显示，如以下代码

<canvas class="canvasBox" canvas-id="myCanvas" id="myCanvas"></canvas>  
        <view class="btn" @tap="canvasTap">点击</view>  

methods: {  
            canvasTap() {  
                ctx.beginPath()  
                ctx.moveTo(100, 200)  
                ctx.rect(100, 200, 60, 40)  
                ctx.stroke()  
                // ctx.draw()  
                console.log(222)  

                ctx.beginPath()  
                ctx.moveTo(60, 60)  
                ctx.arc(60, 60, 30, 0, 2 * Math.PI)  
                ctx.setFillStyle("#FF0000")  
                ctx.fill()  

                //draw方法只需要调用一次，把所有绘制的图形都显示到canvas中  
                ctx.draw()  
            }  
        }